frontend-design

仓库创建 2025年10月22日最近提交 2 个月前SkillHot 收录 23 天前

⬈ GitHub 仓库 ⬈ SKILL.md 原文件 ⬇ Raw 原始文件

▸ 精选理由

注重美学与可生产化实现，避免通用 AI 产物的平庸外观。

▸ 风险提示

生成代码需人工审查与依赖管理，避免直接复制使用导致安全或许可问题。

这个 Skill 做什么

生成高质量、富有设计感的生产级前端界面与可运行代码。

生成有审美、有细节、能直接运行的前端界面与代码，避免那种千篇一律的 AI 风格。适合需要页面、组件或完整前端应用的场景，既产视觉稿也产可复用的实现代码。特点是把设计感和可投产的工程实现放在同等重要的位置，兼顾美观与可维护性。

▸ 展开 SKILL.md 英文原文

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

开发编程前端设计组件生成代码质量通用

1.8k

Stars

487

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/ComposioHQ/awesome-claude-plugins/master/frontend-design/skills/frontend-design/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/ComposioHQ/awesome-claude-plugins/master/frontend-design/skills/frontend-design/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

## Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:
- **Purpose**: What problem does this interface solve? Who uses it?
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, e

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有