frontend-design 是前端界面设计的纯指令 Skill——通过”设计思维 + 美学指南”的极简指令，引导 Claude 创建视觉惊艳、风格独特的前端界面。
- 🎨 设计思维框架：目的 → 基调 → 约束 → 差异化，四步定义设计方向
- 🚫 反”AI 模板风”：明确禁止 Inter、Roboto、紫色渐变、居中布局等 AI 常见风格
- 🔤 字体策略：鼓励使用独特字体组合，避免通用系统字体
- 🎭 基调光谱：从极简主义到极繁主义的完整创意范围
- ✨ 动效设计：高影响力动画（页面加载 reveal、hover 状态、scroll-trigger）
当用户请求”构建网站”、“创建 landing page”、“设计 React 组件”、“美化界面”、“制作仪表盘”等时触发。
One-Line Summary
Section titled “One-Line Summary”frontend-design is a pure-instruction Skill for frontend interface design — using minimal instructions for “design thinking + aesthetic guidelines” to guide Claude in creating visually stunning, distinctively styled frontend UIs.
Core Capabilities
Section titled “Core Capabilities”- 🎨 Design thinking framework: Purpose → Tone → Constraints → Differentiation, four steps to define design direction
- 🚫 Anti-”AI template” aesthetics: explicitly bans Inter, Roboto, purple gradients, centered layouts, and other AI-common styles
- 🔤 Font strategy: encourages unique font pairings, avoids generic system fonts
- 🎭 Tone spectrum: full creative range from brutal minimalism to maximalist chaos
- ✨ Motion design: high-impact animations (page load reveals, hover states, scroll-triggering)
Trigger Scenarios
Section titled “Trigger Scenarios”Triggers when users request “build a website”, “create a landing page”, “design React components”, “beautify the UI”, “build a dashboard”, etc.
File Inventory
Section titled “File Inventory”- frontend-design
目录结构分析
Section titled “目录结构分析”frontend-design 是极简的”纯指令型” Skill——整个技能只有 2 个文件：SKILL.md + LICENSE.txt。
它是”少即是多”的典范：仅用约 43 行 SKILL.md，就能引导 Claude 产生丰富且差异化的前端设计输出。
SKILL.md 结构解析
Section titled “SKILL.md 结构解析”约 43 行的 SKILL.md 虽然简短，但层次分明：
1. 设计思维（Design Thinking）——约 15 行
Section titled “1. 设计思维（Design Thinking）——约 15 行”Claude 在写代码之前必须先进行设计思考：
- 目的（Purpose）：这个界面解决什么问题？谁在使用？
- 基调（Tone）：选择一个极端方向——极简主义、极繁主义、复古未来、有机自然、野兽派、装饰艺术等
- 约束（Constraints）：技术限制（框架、性能、可访问性）
- 差异化（Differentiation）：什么让这个界面令人难忘？
核心思想：选择明确的概念方向并精准执行。无论极繁还是极简，关键在于”有意为之”而非”强度大小”。
2. 前端美学指南（Frontend Aesthetics Guidelines）——约 25 行
Section titled “2. 前端美学指南（Frontend Aesthetics Guidelines）——约 25 行”涵盖了 5 个设计维度：
3. 反 AI 模板风
Section titled “3. 反 AI 模板风”清单明确禁止：
- Inter、Roboto、Arial、system-ui 等过度使用的字体
- 紫色渐变加白色背景的”AI 经典配色”
- 可预测的居中布局
- 千篇一律的组件模式和圆角
”纯指令”模式的力量
Section titled “”纯指令”模式的力量”这种模式的精妙之处在于：不通过 Python 脚本或模板，而是通过精心编写的创意约束来引导 Claude 的生成行为。SKILL.md 扮演的不是”说明书”，而是”创意简报”——它定义了”不要做什么”和”要考虑什么”，然后让 Claude 在创意空间中自由发挥。
Directory Structure Analysis
Section titled “Directory Structure Analysis”frontend-design is a minimal “pure-instruction” Skill — only 2 files: SKILL.md + LICENSE.txt.
It’s a model of “less is more”: just ~43 lines of SKILL.md guide Claude to produce rich, differentiated frontend design outputs.
SKILL.md Structure Analysis
Section titled “SKILL.md Structure Analysis”Though brief at ~43 lines, the SKILL.md has clear structure:
1. Design Thinking (~15 lines)
Section titled “1. Design Thinking (~15 lines)”Claude must do design thinking before writing code:
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick an extreme direction — brutal minimalism, maximalist, retro-futuristic, organic, brutalist, art deco, etc.
- Constraints: Technical limitations (framework, performance, accessibility)
- Differentiation: What makes this unforgettable?
Core idea: Choose a clear conceptual direction and execute with precision. Whether maximalist or minimalist, the key is intentionality, not intensity.
2. Frontend Aesthetics Guidelines (~25 lines)
Section titled “2. Frontend Aesthetics Guidelines (~25 lines)”Covers 5 design dimensions:
3. Anti-”AI Template” Aesthetics
Section titled “3. Anti-”AI Template” Aesthetics”Explicitly bans:
- Overused fonts (Inter, Roboto, Arial, system-ui)
- “AI classic” purple gradients on white backgrounds
- Predictable centered layouts
- Cookie-cutter component patterns and rounded corners
The Power of “Pure Instruction” Pattern
Section titled “The Power of “Pure Instruction” Pattern”The brilliance is: not through Python scripts or templates, but through carefully crafted creative constraints that guide Claude’s generation behavior. SKILL.md doesn’t act as a “manual” but as a “creative brief” — defining “what not to do” and “what to consider”, then letting Claude explore freely within the creative space.
| 维度 | 关键原则 |
|---|---|
| Typography | 用户独特字体，避免 Arial/Inter；用 display + body 组合 |
| Color & Theme | CSS 变量统一管理；大胆的强调色 + 克制的主色 |
| Motion | 高影响力动画优先，CSS-only 方案；横向逐一 reveal |
| Spatial Composition | 非对称布局、叠加、对角线流动、大胆留白 |
| Backgrounds | 创造氛围和深度，而非默认纯色；渐变网格、噪点纹理等 |
| Dimension | Key Principle |
|---|---|
| Typography | Use distinctive fonts, avoid Arial/Inter; display + body pairings |
| Color & Theme | CSS variables for consistency; bold accent + restrained dominant color |
| Motion | High-impact animations preferred, CSS-only; staggered reveals |
| Spatial Composition | Asymmetric layouts, overlap, diagonal flow, bold negative space |
| Backgrounds | Create atmosphere and depth, not default solid colors; gradient meshes, noise textures |
frontend-design 不包含任何脚本、模板或资产文件。
“纯指令”模式的深度解析
Section titled ““纯指令”模式的深度解析”这是 Skill 生态中最极简的模式——全部逻辑都编码在约 43 行的 Markdown 指令中。
纯指令模式 vs 脚本驱动模式
Section titled “纯指令模式 vs 脚本驱动模式”frontend-design 说明了技能设计的核心原则：复杂的行为不一定需要复杂的结构。一个设计精良的 SKILL.md 可以比拥有 10 个 Python 脚本的 skill 产生更丰富、更多样的输出。关键在于：
- 约束的质量：不是”怎么做”，而是”要考虑什么”和”避免什么”
- 创意的自由度：在约束框架内给 Claude 充分的创意空间
- 触发词的精确性：description 字段确保在正确的时间被触发
Script Inventory
Section titled “Script Inventory”frontend-design contains no scripts, templates, or asset files.
Deep Analysis of the “Pure Instruction” Pattern
Section titled “Deep Analysis of the “Pure Instruction” Pattern”This is the most minimal pattern in the Skill ecosystem — all logic encoded in ~43 lines of Markdown instructions.
Pure Instruction vs Script-Driven
Section titled “Pure Instruction vs Script-Driven”Key Insight
Section titled “Key Insight”frontend-design demonstrates a core principle of skill design: complex behavior doesn’t require complex structure. A well-crafted SKILL.md can produce richer, more diverse outputs than a skill with 10 Python scripts. The key is:
- Quality of constraints: not “how to do it”, but “what to consider” and “what to avoid”
- Creative freedom: giving Claude ample creative space within the constraint framework
- Trigger precision: the description field ensures correct triggering at the right time
| 为什么不需要脚本 | 说明 |
|---|---|
| 输出是直接的 HTML/CSS/JS | Claude 直接生成代码，无需中间处理步骤 |
| 创意约束而非计算逻辑 | SKILL.md 提供的是美学方向而非算法规则 |
| 差异化来自灵活的组合 | 每个请求都是新的创意挑战，不需要可复用的工具函数 |
| 零依赖 | 不需要 Python、Node.js 或任何外部工具 |
| Why No Scripts Needed | Explanation |
|---|---|
| Output is direct HTML/CSS/JS | Claude generates code directly, no intermediate processing |
| Creative constraints, not computation | SKILL.md provides aesthetic direction, not algorithms |
| Differentiation from flexible combinations | Each request is a new creative challenge, no reusable utility functions needed |
| Zero dependencies | No Python, Node.js, or any external tools required |
| 对比维度 | 纯指令型 | 脚本驱动型 |
|---|---|---|
| 复杂度 | 低（SKILL.md + LICENSE） | 高（多文件、多语言、多层架构） |
| 灵活性 | 极高（Claude 可根据上下文自由调整） | 较低（脚本定义了固定的执行路径） |
| 一致性 | 较低（依赖于 Claude 的解释） | 较高（脚本保证了确定性的行为） |
| 可测试性 | 低 | 高（脚本可单独测试） |
| 最佳场景 | 创意生成（设计、写作） | 自动化流程（评估、转换） |
| Dimension | Pure Instruction | Script-Driven |
|---|---|---|
| Complexity | Low (SKILL.md + LICENSE) | High (multiple files, languages, layers) |
| Flexibility | Very high (Claude adapts to context) | Lower (scripts define fixed execution paths) |
| Consistency | Lower (depends on Claude's interpretation) | Higher (scripts guarantee deterministic behavior) |
| Testability | Low | High (scripts can be tested individually) |
| Best for | Creative generation (design, writing) | Automated workflows (evaluation, conversion) |
- 创意简报模式：SKILL.md 扮演创意总监的角色，提供方向而非步骤——让 Claude 在框架内自由探索
- “反 AI 模板风”清单：明确列出需要避免的常见 AI 设计特征（Inter 字体、紫色渐变、居中布局），显著提升输出的独特性
- 基调光谱：不限制在”好设计”的单一标准内，而是提供从极简到极繁的完整光谱，覆盖更多创意可能性
- 四维设计思维：Purpose → Tone → Constraints → Differentiation，每一维度的思考都导向更好的设计决策
- 极简实现：43 行实现了一个完整的设计指导系统——这是”少即是多”的最高境界
“如果你想创建一个品牌/文案/创意指导类的 Skill…”
- 保留”创意简报”模式：定义设计/写作方向而非具体步骤
- 替换美学指南：将前端美学替换为你的领域原则（如”品牌色彩指南”、“文案语调指南”）
- 保留反模式清单：列出你的领域常见的”AI 味道”特征
- 调整基调光谱：定义你领域中的风格光谱
- 添加领域特定的约束：如”可访问性要求”、“品牌合规规则”
⚠️ 纯指令模式依赖 Claude 的技能： 如果 Claude 的前端能力不足，纯指令可能无法产生高质量输出——脚本驱动型 skill 在这方面更可靠
⚠️ 禁止列表需要更新： 随着 AI 设计趋势变化，“反模式”列表需要定期更新——否则旧的禁止项可能不再适用
⚠️ 不要过度约束： 创意简报应该设边界而不是写答案——过多的约束会扼杀创意
⚠️ 基调选择要清晰： “选择一个极端方向”听起来很好，但 Claude 可能选择折中的安全选项——需要更明确的指导
⚠️ 没有模板导致质量不稳定： 没有模板时，每次生成的结构可能差异很大——适合创意但不利于一致性
Design Highlights
Section titled “Design Highlights”- Creative Brief Pattern: SKILL.md acts as creative director, providing direction not steps — letting Claude explore freely within the framework
- Anti-”AI Template” Checklist: Explicitly lists common AI design features to avoid (Inter fonts, purple gradients, centered layouts) — significantly improving output distinctiveness
- Tone Spectrum: Not limited to a single “good design” standard, but providing a full spectrum from minimal to maximal — covering more creative possibilities
- Four-Dimensional Design Thinking: Purpose → Tone → Constraints → Differentiation — each dimension leads to better design decisions
- Minimal Implementation: 43 lines implement a complete design guidance system — the ultimate expression of “less is more”
Reusable Patterns
Section titled “Reusable Patterns”Porting Guide
Section titled “Porting Guide”“If you want to create a branding/copywriting/creative direction Skill…”
- Keep “Creative Brief” pattern: define direction not steps
- Replace aesthetic guidelines: swap frontend aesthetics for your domain principles (e.g., “brand color guide”, “copywriting tone guide”)
- Keep anti-pattern checklist: list common “AI smell” features in your domain
- Adjust tone spectrum: define your domain’s style spectrum
- Add domain-specific constraints: e.g., “accessibility requirements”, “brand compliance rules”
Common Pitfalls
Section titled “Common Pitfalls”⚠️ Pure instruction depends on Claude’s skill: If Claude’s frontend capability is insufficient, pure instructions may not produce high-quality output — script-driven skills are more reliable in this regard
⚠️ Ban list needs updates: As AI design trends evolve, the “anti-pattern” list needs regular updates — otherwise old bans may no longer apply
⚠️ Don’t over-constrain: Creative briefs should set boundaries not write answers — too many constraints kill creativity
⚠️ Tone selection needs clarity: “Pick an extreme direction” sounds good, but Claude might choose safe middle options — needs clearer guidance
⚠️ No template means quality variance: Without a template, output structure can vary widely — good for creativity, bad for consistency
| 模式 | 说明 | 适用于... |
|---|---|---|
| 创意简报 | 用 SKILL.md 充当创意简报，定义方向而非步骤 | 任何创意生成型 skill（设计、文案、品牌） |
| 反模式清单 | 明确列出需要避免的常见模式 | 需要打破 AI 输出同质化的 skill |
| 基调光谱 | 提供从 A 到 B 的完整风格范围 | 需要覆盖多种口味的设计 skill |
| 四维思考框架 | Purpose → Tone → Constraints → Differentiation | 任何需要前期思考的 skill |
| Pattern | Description | Applies to... |
|---|---|---|
| Creative Brief | SKILL.md as creative brief, defining direction not steps | Any creative generation skill (design, copywriting, branding) |
| Anti-Pattern Checklist | Explicitly list patterns to avoid | Skills needing to break AI output homogeneity |
| Tone Spectrum | Full style range from A to B | Design skills covering multiple tastes |
| Four-Dimension Thinking Framework | Purpose → Tone → Constraints → Differentiation | Any skill needing upfront thinking |