frontend-design

仓库创建 2025年2月14日最近提交 6 小时前SkillHot 收录 20 天前

▸ 精选理由

适合需要良好审美与可复用代码的前端实现场景。

这个 Skill 做什么

按高质量设计标准生成可生产的前端界面与组件代码。

把前端设计做成可直接上线的生产级代码，能实现网页、落地页、仪表盘或 React 等组件，既有创意又注重可用性。当你想要高质量、不像流水线 AI 风格的界面并且需要可运行代码时就用它。特点是兼顾审美与工程实用，输出精细的 HTML/CSS/JS 或组件实现，便于直接集成到项目里。

▸ 展开 SKILL.md 英文原文

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

开发编程前端设计组件开发UI 美学通用

6.2k

Stars

707

Forks

仓库内 Skill

+70

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/ThinkInAIXYZ/deepchat/dev/resources/skills/frontend-design/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/ThinkInAIXYZ/deepchat/dev/resources/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 公开信息 · 原文版权归作者所有