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

distinctive-frontend-design

GitHub

为全新或重大重构的前端界面提供基于主题、受众和内容的独特视觉方向。定义色彩、排版及布局策略，避免通用设计，强调内容表达与用户体验细节。

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

Trigger Scenarios

需要全新前端视觉设计方案对现有界面进行大幅度视觉重构

Install

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

More Options

Non-standard path

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

Use without installing

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.