anthropic-style-frontend-cn

Generates Anthropic-style Chinese front-end UI layouts with CSS variables and accessibility rules.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/rhyme17/NexusAI --skill anthropic-style-frontend-cn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: anthropic-style-frontend-cn
Source: https://github.com/rhyme17/NexusAI/tree/main/.github/skills/website-style-optimization
Command: npx skills add https://github.com/rhyme17/NexusAI --skill anthropic-style-frontend-cn

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

解决“前端界面千篇一律、缺乏品牌温度与一致性”的问题,通过一套 Anthropic 风格的字体、色彩、布局与组件规范,让你的页面看起来更有个性、更像认真设计过,而不是通用模板拼出来的。

Core Features & Use Cases

  • 多模式设计机制:根据 dashboard / admin / landing 等关键词自动切换密度与排版策略,保证视觉取向与场景匹配。
  • Token 化与组件复用约束:强制使用统一 CSS Token(如暖米底色与橙色唯一强调)并优先调用现成组件(如 Table、Modal、Chat UI),避免硬编码与重复造轮子。
  • 数据密集与无障碍规则:为 Dashboard 规定信息层级、数字/表格呈现与图表配色上限,并内建焦点环、焦点陷阱与可访问性底线,适配真实产品交互。

Quick Start

让用户告诉你要做什么页面(例如“为 NexusAI 做一个带实时指标的 Dashboard 页面,并使用 Anthropic 风格,包含 KPI 卡片、趋势图、数据表和一个删除警告弹窗”),然后直接按本 skill 规范生成界面与关键样式实现。

Frequently Asked Questions about anthropic-style-frontend-cn

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate Anthropic style front-end UI layouts for dashboards and landing pages?▼

To generate Anthropic style front-end UI layouts, provide page requirements like dashboard or landing keywords, and the system outputs CSS variables, typography pairing, and reusable component catalog with brand-aligned token constraints.

How does tokenization enforce design consistency in dashboard data-dense screens?▼

Tokenization enforces design consistency by applying strict CSS variables for colors, density hierarchy limits, and single accent-color rules, preventing hardcoded styles and ensuring reusable component catalog usage across dashboard interfaces.

Can I use this design system for both admin utility consoles and chat interfaces?▼

Yes, the design system supports admin utility consoles and chat interfaces by using mode selection driven by user-provided keywords, automatically switching density and typography strategies to match each specific interface scenario.

What accessibility requirements are built into the front-end component catalog?▼

Accessibility requirements include enforced focus visibility with focus rings, focus trap management for overlays, and baseline compliance rules applied across all reusable components to support real product interaction standards.

Do I need specific dependencies to apply the Anthropic style design system?▼

No specific dependencies are required to apply the Anthropic style design system, as it operates independently using self-contained CSS variables, token definitions, and a reusable component catalog without external framework constraints.

What is the best way to avoid the generic AI feel in front-end UI design?▼

The best way to avoid generic AI feel in front-end UI design is enforcing a single accent-color rule with warm cream base, typography pairing constraints, and density hierarchy limits to produce deliberate, brand-aligned visual identity.