design-taste-frontend
使用设计护栏构建优质界面
AI编码助手默认生成通用、可预测的界面。此技能通过严格的规则、组件架构和性能标准来生成专业级的前端代码。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“design-taste-frontend”。 创建带非对称布局和优质排版的英雄区
预期结果:
使用min-h-[100dvh]的左对齐英雄区，text-6xl的Geist字体标题，max-w-[65ch]的text-gray-600段落，以及active scale-[0.98]反馈的行动号召按钮。右侧包含带渐变淡出的背景图片。
正在使用“design-taste-frontend”。 构建带五个动画卡片的Bento Grid
预期结果:
响应式网格包含五张卡片：带layoutId交换的自动排序任务列表、带打字机循环的搜索栏、带呼吸指示器的实时状态面板、无限数据轮播，以及带错开高亮的对焦模式文档视图。所有卡片使用Framer Motion弹性物理并为性能进行记忆化。
安全审计
安全All 161 static analysis findings were evaluated and determined to be false positives. The external_commands pattern (125 locations) is markdown inline code formatting, not shell execution. The blocker weak-crypto findings (16 locations) are misidentified hex color values in CSS. The system-reconnaissance findings (20 locations) are legitimate AI coding instructions for dependency verification. The single network finding is a placeholder image URL for UI mockups. The skill is a markdown instruction document for AI coding assistants with no executable code, no network calls, and no security risks.
质量评分
你能构建什么
专业SaaS仪表盘开发
前端开发人员使用此技能配合Claude Code生成精美的SaaS仪表盘，包含Bento Grid布局、正确的加载状态和平滑的布局过渡，无需手动设计决策。
跨团队设计系统一致性
设计工程师与团队分享此技能，确保所有AI生成的组件遵循相同的排版比例、色彩校准和响应式断点规则。
高端营销落地页
独立创始人使用此技能配合Codex生成非对称英雄区、动态排版和滚动驱动动画，避免通用AI美学。
试试这些提示
为SaaS产品创建一个英雄区，左对齐标题、辅助段落和行动号召按钮。使用此技能的设计基线。
使用非对称两列交错布局生成功能区，文字内容和图片占位符交替排列。遵循反居中偏差和网格优先于flex计算规则。
构建一个五卡片Bento Grid，包含持续的微交互。每个卡片必须有使用Framer Motion弹性物理的无限循环动画。包含布局过渡和列表项的错开编排。
创建带有内部边框折射和彩色阴影的玻璃拟态面板。仅在固定伪元素上应用颗粒滤镜。确保所有动画仅使用transform和opacity以实现硬件加速。
最佳实践
- 在建议安装第三方库命令前，始终检查package.json。
- 使用min-h-[100dvh]而非h-screen来创建全高区块，防止移动端布局跳动。
- 将交互组件隔离为叶子组件并在顶部添加use client。保持服务器组件静态。
- 仅对transform和opacity属性进行动画处理，切勿对top、left、width或height进行动画处理。
避免
- 使用带紫色渐变的居中英雄区。这是AI设计中最常见的俗套。
- 使用flexbox百分比布局而非CSS Grid构建复杂百分比布局。
- 将持续动画放在父组件内。这会触发不必要的重新渲染和性能崩溃。