finesse-skill
给AI编码助手的高级界面设计技能
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：finesse-skill。 它的用途是：给AI编码助手的高级界面设计技能 完整的 Skill 内容见：https://321skill.com/skills/finesse-skill/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“用finesse为一个分布式智能平台做一个品牌落地页，包含Three.js粒子轨道环效果”，它会自动注册为brand路线，选择灵魂引擎，生成高级感物理层和完整页面代码。
对AI说：“用finesse做一个产品仪表盘，包含数据表格和图表组件”，它会走product路线，生成清晰的组件系统。
对AI说：“用finesse做一个精品咖啡品牌站，editorial浅色主题”，它会输出更优的排版和视觉语言。
介绍
解决什么问题：AI编码助手生成的界面往往廉价、千篇一律，缺乏品牌感和产品级精密感。finesse-skill 通过一套完整的设计规则和视觉引擎，让AI能输出“绝不廉价的高级界面”——无论是品牌落地页还是产品仪表盘，都能达到惊艳的视觉水准。
怎么用：安装后，在对话中说出“用finesse做一个…”或使用 /finesse 触发。它会先读取brief，判断是品牌路线（brand）还是产品路线（product），然后拧动SOUL、SPECTACLE、DENSITY三个旋钮，铺上高级感物理层（噪点、暗角、字重张力、OKLCH配色），再分流执行：品牌路线从五类视觉引擎（Three.js、Canvas、GSAP等）中选一个做透；产品路线则构建组件系统、数据可视化、信息架构，并附上反廉价黑名单自检，最终交付高质量代码。
适合谁：前端开发、UI设计师、全栈开发者，以及使用Claude Code、Codex、Cursor、Copilot等AI编码助手并希望提升界面品质的团队。无需设计经验，按使用清单操作即可。
使用建议：首次使用请先阅读 USAGE.md 清单。品牌路线适合落地页、品牌站、发布页、作品集；产品路线适合仪表盘、后台、数据分析页。支持多页一致性，如需调整风格可重新触发注册。
核心特点
与同类设计prompt/技能相比，finesse-skill 不是简单罗列CSS规则，而是提供了一套完整的“register分流（brand/product）→拧旋钮（SOUL/SPECTACLE/DENSITY）→铺物理层→选引擎→反廉价自检”的可执行工作流，并内置了行业灵魂决策矩阵、五类视觉引擎、25种图表选型等生产级素材，让AI从设计思维到代码输出一步到位。
注意事项
不适用于纯后端逻辑、无视觉要求的项目，或需要严格遵守已有设计系统（如企业级组件库）的场景，finesse 的设计规则可能会与现有系统冲突。
常见问题
这个技能支持哪些AI编码助手？
支持Claude Code、Codex、Cursor、GitHub Copilot、Trae、Windsurf等，可通过npx skills统一安装，或手动复制规则文件到对应目录。
设计风格可以自定义吗？比如我想用特定品牌的配色？
可以。在注册时说明品牌色或参考风格，finesse 会通过OKLCH配色策略阶梯（restrained/committed/full/drenched）适配，并支持自定义行业灵魂矩阵。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/finesse-skill/raw/index.md 读取 finesse-skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/finesse-skill/raw/index.md（查看排版版本）