使用开源 skills 技能包规范 AI 前端开发

针对 AI 写前端常出现的间距乱飞、颜色缺乏对比度、没有无障碍支持和文案生硬等细节缺失问题，可以引入封装了资深工程师与 UI 设计师经验的开源技能包来解决。

X (Twitter)@realfxw6

AI AgentCursorClaude Codev0Boltjakubkrehel/skills

收录于 2026-11-03 · 原文发布于 2026-11-01

要点

.cursorrules

- 确保前端代码间距规范、颜色对比度合规
- 必须包含无障碍支持（Accessibility）
- 保持文案专业自然

可复制提示词

请参考 [jakubkrehel/skills] 开源项目中的资深前端工程师与 UI 设计师经验，在编写前端代码时确保：1. 间距规范整齐；2. 颜色具有良好对比度；3. 包含无障碍支持；4. 文案自然专业，避免细节缺失。

#AI前端#避坑指南#UI设计#开源项目

参考多位设计大佬的经验，通过规范圆角、颜色、字体和边框等细节，避免AI生成的界面显得廉价或土气。合理利用现成设计组件库和提示词，能显著提升Vibe Coding的界面质感。

通过引入艺术方向、真实开源图片引用以及真实浏览器审查与截图自我修正机制，避免AI生成千篇一律的平庸网页（通用AI页面）。

针对 AI 生成网页廉价、审美差的问题，可使用开源项目 Impeccable 为 Claude Code、Cursor 等编程 Agent 增加 UI 设计能力，通过 24 个命令和 critique 功能调整设计并评审问题。

觉得有用？订阅 TG 频道或在 X 关注获取每日更新

觉得有用？请我喝杯咖啡 ☕

本站内容免费开放。如果这些内容帮到了你，可以随手赞赏支持一下，钱直接到作者个人账户，本站不经手任何资金。

内容由 AI 依据原文翻译整理，细节以原帖为准；版权归原作者。