ia-frontend-design
为前端界面提供视觉设计与美学指导
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：ia-frontend-design。 它的用途是：为前端界面提供视觉设计与美学指导 完整的 Skill 内容见：https://321skill.com/skills/ia-frontend-design-x-6/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我正在为一个SaaS产品设计仪表盘，希望它看起来专业、现代且清晰，主色调是蓝色，你有什么视觉设计建议？'，它会提供关于色彩层次、信息密度、组件间距、字体选择和整体布局的专业指导，帮助你确立仪表盘的视觉风格。
介绍
本技能专注于前端界面的视觉设计与美学方向把控。它旨在解决开发者在构建网页、落地页、仪表盘或Next.js服务器组件时，对视觉统一性、品牌调性和美学细节缺乏专业指导的问题。
使用时，开发者可以描述其项目类型、品牌调性或具体的设计困惑，该技能将提供关于色彩、排版、布局、组件视觉风格等方面的专业建议，帮助确立或优化界面的视觉设计方案。
它非常适合前端开发、UI设计师、全栈开发以及产品经理等角色，尤其是那些需要快速确立产品视觉风格、提升界面美观度或确保设计一致性的项目成员。
建议在项目早期设计阶段或界面重构时使用，以获得系统性的指导。需注意，它侧重于宏观美学方向和设计原则，不提供具体的像素级UI设计稿或代码实现。
核心特点
与专注于React模式或代码实现的技能不同，本技能的核心在于提供纯粹的视觉美学指导和设计方向建议，帮助确立界面整体的视觉身份和品牌感。
注意事项
不适合需要具体代码实现、组件构建或React开发模式指导的场景。
常见问题
这个技能能帮我写CSS代码吗？
不能，它主要提供视觉设计方向和美学建议，不生成具体代码。
这个技能和react-frontend技能有什么区别？
本技能专注于视觉设计，而react-frontend专注于React开发模式和测试。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ia-frontend-design-x-6/raw/index.md 读取 ia-frontend-design 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ia-frontend-design-x-6/raw/index.md（查看排版版本）