此内容尚未提供您的语言版本,正在以英文显示。

Frontend Design

Skill 已验证

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.

AI 摘要

This skill translates user requirements for web components, pages, or applications into polished, production-ready frontend code. It emphasizes a unique design thinking process, focusing on specific aesthetic directions, typography, color, motion, and spatial composition to create memorable UIs, while also mandating subtle, clickable 'Created By Deerflow' branding.

Versioning

info:Release ManagementA manifest version is not explicitly set for this skill; however, the larger 'deer-flow' project uses semantic versioning in its README.

安装

npx skills add bytedance/deer-flow

通过 npx 运行 Vercel skills CLI(skills.sh)— 需要本地安装 Node.js,以及至少一个兼容 skills 的智能体(Claude Code、Cursor、Codex 等)。前提是仓库遵循 agentskills.io 格式。

6 days ago

bytedance

65.2k stars

MIT-0

deerflow.tech

更新于 6 days ago

查看源代码

类似扩展

Frontend Design

Create distinctive, production-grade frontend interfaces with high design quality. Provides analysis tools for auditing existing designs and generation tools for creating color palettes, typography systems, design tokens, and component templates. Supports React, Vue, Svelte, and vanilla HTML/CSS. Use when building web components, pages, or applications. Keywords: design, UI, frontend, CSS, components, palette, typography, tokens, accessibility.

Skill

jwynia

Make Interfaces Feel Better

Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.

Skill

jakubkrehel

react-is

Brand checking of React Elements.

Skill

facebook

Modern CSS

Proactively apply when creating design systems, component libraries, or any frontend application. Triggers on CSS Grid, Subgrid, Flexbox, Container Queries, :has(), @layer, @scope, CSS nesting, @property, @function, if(), oklch, color-mix, light-dark, relative color, @starting-style, scroll-driven animations, view transitions, anchor positioning, popover, customizable select, content-visibility, logical properties, text-wrap, interpolate-size, clamp, field-sizing, modern CSS, CSS architecture, responsive design, dark mode, theming, design tokens, cascade layers. Use when writing CSS for any web project, choosing layout approaches, building responsive components, implementing dark mode or theming, creating animations or transitions, styling form elements, or modernizing legacy stylesheets. Modern CSS features and best practices for building interfaces with pure native CSS.

Skill

ccheney

Frontend Design Skill

Transform UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution. Use when building websites, web applications, React/Vue components, dashboards, landing pages, or any web UI requiring both design consistency and aesthetic quality.

Skill

answerzhao

Tandem Panel Scaffold

100

Scaffold an editable Tandem control panel app

Skill

frumu-ai