前端开发者注意，这条助手技能不用装软件也不用上传设计稿，说一句话就能给页面定下视觉方向。
怎么用
适合新建或重做前端界面时使用。它提供 Swiss、Industrial、Brutalist、Aurora Maximalism、Chaotic Maximalism、Retro-Futuristic、Organic、Lo-Fi 八种锚点，每种都规定了颜色、字体、结构、纹理和破坏条件。
核心用法
先识别产品目的、用户、领域和内容密度，再从 8 个视觉锚点中选择一个并完全遵守它的 token。实现时把配色、字体、结构、纹理和交互动作落到真实 CSS 中，同时要求屏幕上的文案都是真信息或明确的样本文案，避免伪造数据、装饰性标签和 AI 味文案。
触发场景
新建前端页面、重做 UI 风格、需要更明确的视觉方向、页面看起来太默认或太模板化、需要约束配色字体结构质感、需要避免前端界面的假数据和填充文案
优劣特点
亮点：8 个锚点都有明确 token，能强制页面脱离默认模板感；同时强调内容纪律，减少假数据和无意义装饰文案。限制：它是设计约束技能，不提供业务组件库；需要执行者在实现时严格选择单一锚点，不能混搭。
适用人群
需要让 AI 产出更有设计判断的前端开发者、独立产品作者、设计工程师和运营落地页制作人员。
详细说明
frontend-design 是一个面向 Claude Code、Codex 和 Gemini CLI 的前端设计技能。它要求在写代码前先判断场景、选择一个视觉锚点、定义一个可见差异化动作，再按锚点的 CSS token 实现页面，避免泛泛的默认风格和无意义填充文案。
常见问题
它是做什么的？
前端开发者注意，这条助手技能不用装软件也不用上传设计稿，说一句话就能给页面定下视觉方向。
支持哪些工具？
这个技能可以装进 Claude Code、Codex、Gemini CLI。
怎么用？
适合新建或重做前端界面时使用。它提供 Swiss、Industrial、Brutalist、Aurora Maximalism、Chaotic Maximalism、Retro-Futuristic、Organic、Lo-Fi 八种锚点，每种都规定了颜色、字体、结构、纹理和破坏条件。
源码在哪里？
源码地址：https://github.com/Ilm-Alan/frontend-design
怎么安装？
安装在星算助手客户端里完成 —— 由它决定装进 Claude Code、Codex 还是别的工具，并写好对应配置。