Design Taste Frontend
为着陆页和作品集注入设计品味的AI前端技能
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Design Taste Frontend。 它的用途是：为着陆页和作品集注入设计品味的AI前端技能 完整的 Skill 内容见：https://321skill.com/skills/design-taste-frontend-x-5/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我需要一个环保科技公司的着陆页，主色调是橄榄绿和米白，字体用无衬线，要有大标题、功能介绍卡片、用户评价轮播，最后是联系表单。' 它会自动生成一个包含完整布局、动效、响应式断点的HTML文件，并提示你如何调整间距和颜色。
介绍
在快速迭代的前端开发中，设计一致性常常被牺牲，导致界面粗糙、缺乏细节。Design Taste Frontend 专门解决“草率设计”问题：它能够读取产品简报或设计需求，自动推断出合适的设计方向（如风格、配色、排版），并直接生成高质量、可落地的前端界面代码，让着陆页、作品集、重设计等项目拥有专业级视觉表现。
使用方式非常简单：你只需提供一段文字描述（brief）或参考链接，该技能就会分析设计意图，自动生成对应的HTML/CSS/JS代码，并内置现代设计模式（如Figma式间距、系统字体栈、流畅动画）。它还能在生成过程中主动询问调整方向，进行迭代优化，最终输出可直接部署的界面。
适合前端开发、UI设计师、独立开发者、创业团队以及任何需要快速创建美观前端页面的场景。尤其适合那些对设计有较高要求，但缺乏专业设计师资源的小团队或个人。使用前建议准备好清晰的设计需求（目标用户、品牌调性、页面目标），以获得最佳效果。
注意：该技能专注于视觉表现和前端代码生成，不包含后端逻辑或复杂数据交互。如果需要动效或交互，请在brief中明确说明。建议搭配版本控制工具使用，方便对生成结果进行微调。
核心特点
与同类前端生成技能不同，它强调“设计品味”（anti-slop），在生成代码时会自动应用现代设计原则（如韵律、对比、留白），而非简单填充模板，能产出接近专业设计师水准的界面。
注意事项
不适合需要复杂后端逻辑、大量数据交互或非标准UI组件的项目，也不适合对代码体积有严格限制的嵌入式场景。
常见问题
如何安装 Design Taste Frontend？
通过 git clone 仓库到本地，然后运行 npm install 安装依赖，具体命令见下方安装部分。
能在现有项目中使用吗？
可以，它生成的是标准前端代码（HTML/CSS/JS），可以轻松复制到现有项目中，或作为独立页面使用。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/design-taste-frontend-x-5/raw/index.md 读取 Design Taste Frontend 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/design-taste-frontend-x-5/raw/index.md（查看排版版本）