AI导哈

前端开发

designing-frontend-interfaces

osmontero/openc…e-skills

Use when building or restyling any web interface — landing pages, dashboards, marketing sites, web apps, React/Vue components, HTML/CSS layouts, artifacts, posters — or when asked to make a UI look better, more polished, more distinctive, less generic, or less "AI-generated". Also use when a design brief, art direction, visual identity, type scale, or color system is needed before implementation.

  • 669 次安装
  • 16 星标
  • 收录于

安装命令

npx skills add https://github.com/osmontero/opencode-skills --skill designing-frontend-interfaces

SKILL.md

Designing Frontend Interfaces

Overview

Distinctive interfaces come from committing to one aesthetic direction and executing it with a locked system of values. Generic interfaces come from picking each value ad hoc at the moment it is needed.

Core principle: Decide the system before you write the components. Every number in the finished CSS should trace back to a scale you chose deliberately.

This skill covers visual craft. Two companion skills cover the rest of interface quality:

  • REQUIRED SUB-SKILL for anything with flows, forms, or non-trivial state: use designing-user-experience
  • REQUIRED SUB-SKILL before shipping: use building-accessible-interfaces
  • To critique a finished UI, use reviewing-interface-quality

The Iron Law

NO COMPONENT CODE BEFORE THE DESIGN BRIEF AND TOKEN BLOCK EXIST