ia-frontend-design
为前端界面提供视觉设计与美学指导
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：ia-frontend-design。 它的用途是：为前端界面提供视觉设计与美学指导 完整的 Skill 内容见：https://321skill.com/skills/ia-frontend-design-x-4/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在设计一个数据分析仪表盘，希望界面看起来专业、清晰且现代，能给我一些视觉设计上的建议吗？”，它会提供关于色彩方案、图表配色、布局层次以及字体选择等方面的美学指导。或者，你可以说：“帮我评估一下这个登录页的视觉一致性，并提出改进方向。”
介绍
该技能专注于前端界面的视觉设计与美学方向把控。它解决了开发者在构建网页、落地页、仪表盘或Next.js服务端组件时，对视觉统一性和美观性缺乏专业指导的问题。
使用时，开发者可在构建涉及视觉呈现的前端项目时调用此技能，它能提供关于色彩、排版、布局、组件视觉一致性等方面的具体建议，帮助塑造清晰、专业的视觉身份。
它非常适合前端开发、UI设计师和全栈开发人员，特别是那些需要快速确定界面视觉风格，或希望提升产品整体视觉品质的开发者。
建议在项目初期或进行视觉迭代时使用，以获得连贯的设计指导。需要注意的是，它侧重于宏观视觉方向和高层次美学原则，不涉及具体的React组件实现模式或代码测试。
核心特点
与专注于React组件模式或代码测试的前端技能不同，本技能的核心在于提供纯粹的视觉设计和美学指导，帮助建立和统一产品的视觉身份（Visual Identity）。
注意事项
不适用于需要具体React组件实现、代码测试或性能优化的场景。
常见问题
这个技能和 react-frontend 有什么区别？
本技能专注于视觉设计和美学指导，而 react-frontend 侧重于 React 组件模式、代码实现和测试。
可以用来设计具体的UI组件吗？
可以指导组件的外观、配色和布局等视觉方向，但不提供具体的组件实现代码。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ia-frontend-design-x-4/raw/index.md 读取 ia-frontend-design 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ia-frontend-design-x-4/raw/index.md（查看排版版本）