syahiidkamil/Software-Engineer-AI-Agent-Atlas0°

frontend-design

仓库创建 2025年6月14日最近提交 1 个月前SkillHot 收录 22 天前

⬈ GitHub 仓库 ⬈ SKILL.md 原文件 ⬇ Raw 原始文件

▸ 精选理由

把设计细节与可运行代码结合，适合需要落地页面的开发者

这个 Skill 做什么

生成高质量、可生产的前端界面和组件代码，注重美学与可用性。

把界面做成能直接上线的高质量前端代码，既好看又好用。适合要做网页、landing、仪表盘、React 组件或把现有 UI 美化的场景。特别注重审美细节和可生产的 HTML/CSS/JS 实现，不走千篇一律的“AI 风”。

▸ 展开 SKILL.md 英文原文

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

开发编程前端设计UI实现代码产出通用

313

Stars

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/syahiidkamil/Software-Engineer-AI-Agent-Atlas/main/.claude/skills/frontend-design/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/syahiidkamil/Software-Engineer-AI-Agent-Atlas/main/.claude/skills/frontend-design/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

## Step 1: Context-Driven Design Reasoning

Before any aesthetic choices, use deductive reasoning to derive the right design from the context:

- **Domain**: What is this? (enterprise SaaS, creative portfolio, fintech, healthcare, e-commerce, etc.)
- **Audience**: Who uses this? A CFO expects different

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有