Agent Skills › nightly-labs/openbot › distinctive-frontend-design

distinctive-frontend-design

GitHub

提供基于主题、受众和目的的定制化前端视觉设计方案，涵盖配色、排版及核心元素定义。强调使用真实内容，避免通用美学，确保响应式、无障碍及组件复用，适用于大幅面或重设计场景。

marketplace/production-catalog/skills/distinctive-frontend-design/SKILL.md nightly-labs/openbot

触发场景

需要全新或重大改版的前端界面设计为特定业务场景定制独特视觉风格

安装

npx skills add nightly-labs/openbot --skill distinctive-frontend-design -g -y

更多选项

非标准路径

npx skills add https://github.com/nightly-labs/openbot/tree/main/marketplace/production-catalog/skills/distinctive-frontend-design -g -y

不安装直接使用

npx skills use nightly-labs/openbot@distinctive-frontend-design

指定 Agent (Claude Code)

npx skills add nightly-labs/openbot --skill distinctive-frontend-design -a claude-code -g -y

安装 repo 全部 skill

npx skills add nightly-labs/openbot --all -g -y

预览 repo 内 skill

npx skills add nightly-labs/openbot --list

SKILL.md

Frontmatter

{
    "name": "distinctive-frontend-design",
    "description": "Give new or substantially redesigned interfaces a deliberate visual direction grounded in their subject, audience, content, and purpose. Do not use for minor styling fixes."
}

Distinctive Frontend Design

Ground the design in one concrete subject, its audience, and the interface's primary job. Use real content and the subject's own materials, language, and visual references instead of defaulting to a generic product aesthetic.

Before building, define a compact direction covering palette, typography roles, layout logic, and one signature element. Every structural or decorative choice should encode something true about the content. Review the direction against the brief and replace choices that could belong unchanged to any similar product.

Spend visual boldness in one place and keep the surrounding system disciplined. Match implementation complexity to the idea. Use motion only where it explains change, reinforces hierarchy, or creates one intentional moment.

Treat words as interface material: use plain verbs, name actions consistently, and make errors and empty states explain the next step. Preserve responsive behavior, visible keyboard focus, readable contrast, and reduced-motion preferences.

Reuse the repository's components and design tokens where they fit. Critique the result in context and remove details that do not serve the chosen direction.