Back to Details

aesthetic-guide

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Aesthetic Guide

美学设计指南

Produce exhaustive, implementation-ready design system documentation for a named UI aesthetic. The output is a reference guide detailed enough that a coding agent can faithfully implement the aesthetic with minimal room for interpretation.
为指定的UI美学风格生成详尽的、可直接落地实现的设计系统文档。输出内容为参考指南，其详尽程度需确保编码Agent在实现该美学风格时几乎无需主观解读。

Workflow

工作流程

  1. Identify the aesthetic from the user's request
  2. Check the catalog — read references/aesthetic-catalog.md to see if pre-researched data exists for this aesthetic
  3. Research if needed — if the aesthetic is not in the catalog or the user wants a custom variant, conduct web research to gather implementation-level specifics (exact CSS values, fonts, colors, timing functions)
  4. Load the output schema — read references/output-schema.md for the required structure
  5. Generate the guide — fill every section of the output schema with concrete, copy-pasteable values. No hand-waving, no "choose an appropriate value" — every property must have an exact value or a constrained range with rationale.
  6. Deliver as a markdown file — write the completed guide to the project (default: 
    .claude/docs/{aesthetic-name}-design-system.md
    )
  1. 识别美学风格：从用户的请求中确定目标美学风格
  2. 查阅目录——阅读references/aesthetic-catalog.md，查看是否存在该美学风格的预研数据
  3. 按需开展研究——若该美学风格未收录在目录中，或用户需要自定义变体，则通过网络研究收集可落地的具体细节（精确CSS值、字体、颜色、时间函数）
  4. 加载输出 schema——阅读references/output-schema.md，明确所需的文档结构
  5. 生成指南——为输出schema的每个部分填充具体的、可直接复制粘贴的数值。不得含糊其辞，如“选择合适的值”这类表述——每个属性必须有精确值或带依据的约束范围
  6. 保存为Markdown文件——将完成的指南写入项目（默认路径：
    .claude/docs/{aesthetic-name}-design-system.md
    ）

Research Protocol

研究规范

When researching an aesthetic not in the catalog:
  • Search for "{aesthetic} CSS", "{aesthetic} UI design system", "{aesthetic} web design examples"
  • Look for open-source implementations, CodePen examples, design system documentation
  • Extract concrete values: hex codes, font names, px/rem values, cubic-bezier curves, shadow syntax
  • Cross-reference multiple sources to identify the consensus properties that define the aesthetic
  • Distinguish between essential properties (without these, it's not the aesthetic) and characteristic properties (common but optional)
当研究未收录在目录中的美学风格时：
  • 搜索关键词如“{aesthetic} CSS”、“{aesthetic} UI设计系统”、“{aesthetic} 网页设计示例”
  • 查找开源实现、CodePen示例、设计系统文档
  • 提取具体数值：十六进制颜色码、字体名称、px/rem单位的间距值、cubic-bezier曲线、阴影语法
  • 交叉参考多个来源，确定定义该美学风格的共识性属性
  • 区分核心属性（缺失则不再属于该美学风格）和典型属性（常见但非必需）

Output Requirements

输出要求

  • Every color must be a hex or HSL value, never a name like "dark blue"
  • Every font must be a specific family with fallback stack
  • Every spacing value must be in px or rem
  • Every transition must have duration + timing function
  • Every interactive state (hover, active, focus, disabled) must have explicit CSS
  • Every component must have all pseudo-states defined
  • Include both CSS custom properties (variables) and Tailwind equivalents where applicable
  • 所有颜色必须使用十六进制或HSL值，禁止使用“深蓝色”这类名称
  • 所有字体必须指定具体字体系列及备选栈
  • 所有间距值必须使用px或rem单位
  • 所有过渡效果必须包含时长+时间函数
  • 所有交互状态（悬停、激活、聚焦、禁用）必须有明确的CSS代码
  • 所有组件必须定义所有伪状态
  • 适用时需同时提供CSS自定义属性（变量）和Tailwind等效写法

Customization

自定义选项

The user may request:
  • A specific framework (Tailwind, vanilla CSS, CSS-in-JS) — adjust output format
  • A hybrid ("brutalist with soft shadows") — blend aesthetics, noting which properties come from which
  • A variant ("dark mode cyberpunk" vs "light mode cyberpunk") — generate the specific variant
  • Partial guide (just colors, just typography) — generate only the requested sections
用户可能会提出以下需求：
  • 指定框架（Tailwind、原生CSS、CSS-in-JS）——调整输出格式
  • 混合风格（如“带柔化阴影的粗野主义”）——融合多种美学风格，并标注各属性的来源
  • 风格变体（如“深色模式赛博朋克” vs “浅色模式赛博朋克”）——生成指定的变体版本
  • 部分指南（仅颜色、仅排版）——仅生成用户请求的部分