Token导航 LogoToken导航TokenDH.com
前端设计权限需确认github未标认证来源可访问许可证需确认审计通过

frontend-design前端设计

Agent Skill

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码,整理组件结构,或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式,避免只生成孤立片段;涉及页面改动时,应配合本地预览和构建检查确认视觉效果。

总安装

490

周安装

20

GitHub Stars

254

下载量

157
CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息,不托管安装包,也不代用户安装。

GitHub

来源数

2

许可证

unknown

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:frontend-design(前端设计)
来源仓库:https://github.com/cowork-os/cowork-os
仓库路径:skills/frontend-design
安装命令:
npx skills add https://github.com/cowork-os/cowork-os --skill frontend-design
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill;本站只展示命令,不托管安装包,也不自动执行。

skills.shnpx skills
npx skills add https://github.com/cowork-os/cowork-os --skill frontend-design

简介

frontend-design 打造具有鲜明美学风格的生产级前端界面。

  • 支持 React、Vue 等主流框架与 Tailwind CSS 样式系统。
  • 生成组件化代码结构,兼顾响应式布局与交互细节实现。
  • 建议配合本地预览验证视觉效果,避免脱离项目路由单独产出片段。
  • 适用宿主包括 Codex、Claude、Cursor、Gemini CLI,接入前应确认版本、权限和运行环境要求。

SKILL.md

frontend-design

Purpose

Design and build production-grade frontends with bold, distinctive aesthetics.

Routing

  • Use when: Use when the user asks to design and build production-grade frontends with bold, distinctive aesthetics.
  • Do not use when: Do not use when the request is asking for planning documents, high-level strategy, or non-executable discussion; use the relevant planning or design workflow instead.
  • Outputs: Outcome from frontend-design: task-specific result plus concrete action notes.
  • Success criteria: Returns concrete actions and decisions matching the requested task, with no fabricated tool-side behavior.

Trigger Examples

Positive

  • Use the frontend-design skill for this request.
  • Help me with frontend-design.
  • Use when the user asks to design and build production-grade frontends with bold, distinctive aesthetics.
  • frontend-design: provide an actionable result.

Negative

  • Do not use when the request is asking for planning documents, high-level strategy, or non-executable discussion; use the relevant planning or design workflow instead.
  • Do not use frontend-design for unrelated requests.
  • This request is outside frontend-design scope.
  • This is conceptual discussion only; no tool workflow is needed.

Runtime Prompt

  • Current runtime prompt length: 4071 characters.
  • Runtime prompt is defined directly in ../frontend-design.json.

适合场景

01

前端页面设计

02

生成更有辨识度的 UI

03

避免模板化 AI 页面

04

需要统一视觉方向时

能力概览

能力 1

建立明确视觉方向

能力 2

约束排版、色彩、动效和空间布局

能力 3

提醒避免通用模板化设计

能力 4

要求生成可运行的前端实现

安装后应在对应宿主中按原始 README 的触发条件使用;具体调用方式请以来源页面和 README 为准。

平台分布

Codex

36.3%
按下载量换算57

Claude

32.83%
按下载量换算52

Cursor

19.01%
按下载量换算30

Gemini CLI

9.19%
按下载量换算14

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

权限需确认

当前来源未能明确判断权限范围,默认进入异常复核队列。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源,正式发布前建议补源仓库或其他目录站核验。

来源信息

继续浏览同类 Skills