wangxuming/NianToB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update desktop workflows and app center

Browse Source
This commit is contained in:
inman
2026-05-13 19:14:56 +08:00
parent 20b5aff4ad
commit 7c8781a6e3
160 changed files with 55492 additions and 1423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

424
resources/skills/local/design/SKILL.md
View File

@@ -1,136 +1,74 @@
---
name: design
description: Use for UI/UX design, redesign, visual art direction, layout refinement, frontend polish, design-system creation, and brand-inspired interface work. Includes a searchable UI/UX database plus local DESIGN.md references for concrete product styles such as Apple, Runway, Linear, Notion, Airbnb, Figma, Vercel, Stripe, and more.
description: Use for any design work: product design, UX flows, UI/HTML/web/mobile visual direction, PPT or slide storytelling and layout, brand art direction, design systems, redesigns, frontend polish, and design reviews. Produces design briefs, visual systems, tokens, references, critique, and handoff specs for execution skills such as html-slides, pptx, image, or frontend implementation.
---
# design
Comprehensive design guide for web and mobile applications. Contains 67 styles, 96 color palettes, 57 font pairings, 99 UX guidelines, 25 chart types across 13 technology stacks, and a local library of brand DESIGN.md references. Use the searchable database for design-system reasoning, and use the DESIGN.md references for concrete visual language.
Design director and design-system skill for product, interface, slide, brand, and visual-quality work. Use this skill whenever the user asks something to look better, feel more professional, become more usable, gain a visual direction, become a presentation, or be reviewed from a design perspective.
## Prerequisites
This skill decides what the work should become. It may support execution, but its primary output is design judgment: direction, system, structure, constraints, and acceptance criteria. Use execution skills such as `html-slides`, `pptx`, `image-search`, `imagegen`, or frontend coding tools when the user needs the final artifact built.
Check if Python is installed:
## Core Workflow
### 1. Route The Design Task
Classify the request before choosing tools:
| Task type | Use this skill to produce |
|---|---|
| Product design | User goals, core jobs, information architecture, flows, states, priority, tradeoffs |
| UI, HTML, app, web, mobile | Visual direction, layout system, components, responsive behavior, interaction rules |
| PPT, pitch, report, slides | Narrative spine, section rhythm, slide system, chart treatment, density rules |
| Brand or art direction | Mood, references, palette, typography, imagery, motion, anti-patterns |
| Redesign or polish | Ranked critique, fix strategy, before/after direction, implementation checklist |
| Design system | Tokens, component grammar, page or slide patterns, governance and override rules |
If the task spans multiple surfaces, design the system first, then hand off the relevant parts to the execution skill.
### 2. Extract The Brief
Infer what you can from the user's request. Only ask for missing high-impact preferences that cannot be inferred.
Capture:
- Audience and occasion
- Output surface: product flow, app screen, HTML page, HTML deck, PPT deck, image, document, or review
- Content maturity: topic only, rough notes, full content, existing artifact
- Tone and taste: authoritative, warm, playful, cinematic, editorial, quiet, luxury, technical, etc.
- Constraints: brand, language, accessibility, viewport, platform, deadline, existing code/design system
### 3. Build Evidence Before Deciding
Use the local database when the task needs structured design-system reasoning:
```bash
python3 --version || python --version
python3 skills/design/scripts/search.py "<product type> <industry> <tone> <surface>" --design-system [-p "Project Name"]
```
If Python is not installed, install it based on user's OS:
**macOS:**
```bash
brew install python3
```
**Ubuntu/Debian:**
```bash
sudo apt update && sudo apt install python3
```
**Windows:**
```powershell
winget install Python.Python.3.12
```
---
## How to Use This Skill
When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
### Step 1: Analyze User Requirements
Extract key information from user request:
- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.
- **Industry**: healthcare, fintech, gaming, education, etc.
- **Stack**: React, Vue, Next.js, or default to `html-tailwind`
### Step 2: Generate Design System (REQUIRED)
**Always start with `--design-system`** to get comprehensive recommendations with reasoning:
```bash
python3 skills/design/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
```
This command:
1. Searches 5 domains in parallel (product, style, color, landing, typography)
2. Applies reasoning rules from `ui-reasoning.csv` to select best matches
3. Returns complete design system: pattern, style, colors, typography, effects
4. Includes anti-patterns to avoid
**Example:**
```bash
python3 skills/design/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
```
### Step 2b: Persist Design System (Master + Overrides Pattern)
To save the design system for hierarchical retrieval across sessions, add `--persist`:
```bash
python3 skills/design/scripts/search.py "<query>" --design-system --persist -p "Project Name"
```
This creates:
- `design-system/MASTER.md` — Global Source of Truth with all design rules
- `design-system/pages/` — Folder for page-specific overrides
**With page-specific override:**
```bash
python3 skills/design/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
```
This also creates:
- `design-system/pages/dashboard.md` — Page-specific deviations from Master
**How hierarchical retrieval works:**
1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md`
2. If the page file exists, its rules **override** the Master file
3. If not, use `design-system/MASTER.md` exclusively
### Step 3: Supplement with Detailed Searches (as needed)
After getting the design system, use domain searches to get additional details:
Use targeted searches when useful:
```bash
python3 skills/design/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
```
**When to use detailed searches:**
| Need | Domain | Example |
|------|--------|---------|
| More style options | `style` | `--domain style "glassmorphism dark"` |
| Chart recommendations | `chart` | `--domain chart "real-time dashboard"` |
| UX best practices | `ux` | `--domain ux "animation accessibility"` |
| Alternative fonts | `typography` | `--domain typography "elegant luxury"` |
| Landing structure | `landing` | `--domain landing "hero social-proof"` |
### Step 4: Stack Guidelines (Default: html-tailwind)
Get implementation-specific best practices. If user doesn't specify a stack, **default to `html-tailwind`**.
```bash
python3 skills/design/scripts/search.py "<keyword>" --stack html-tailwind
```
Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`, `jetpack-compose`
Available domains: `product`, `style`, `typography`, `color`, `landing`, `chart`, `ux`, `react`, `web`, `prompt`.
### Step 5: Brand Reference Guidance (when visual direction matters)
Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`, `jetpack-compose`.
When the user asks for a concrete visual direction, brand-inspired style, premium polish, or references a product aesthetic, read only the needed files from:
### 4. Use Brand References For Concrete Taste
When visual direction matters, read only the needed files from:
```text
references/design-md/<slug>/DESIGN.md
```
Pick one primary reference and at most two secondary references. Extract practical rules for mood, palette, typography, layout, component treatment, spacing, motion, and anti-patterns. Adapt those rules to the current product; do not copy a brand literally unless the user explicitly asks for that style.
Pick one primary reference and at most two secondary references. Extract practical rules for mood, palette, typography, layout, component treatment, spacing, motion, and anti-patterns. Adapt the reference to the current product; do not copy a brand literally unless the user explicitly asks for that.
Use these starting points when the user does not name a brand:
Starting points:
| Intent | Suggested references |
|--------|----------------------|
|---|---|
| Light premium product | `apple`, `airbnb`, `notion`, `stripe` |
| Cinematic AI/media | `runwayml`, `apple`, `nike`, `spacex` |
| Clean B2B SaaS | `linear`, `airtable`, `intercom`, `mintlify`, `vercel` |
@@ -140,184 +78,148 @@ Use these starting points when the user does not name a brand:
| Luxury or high-end brand | `bugatti`, `ferrari`, `lamborghini`, `bmw`, `mastercard` |
| Media/editorial | `wired`, `theverge`, `pinterest`, `spotify` |
For 智念助手, prefer `apple`, `linear`, `runwayml`, `notion`, and `airbnb` as common anchors unless the user asks for a different direction.
For Zhinian Assistant work, prefer `apple`, `linear`, `runwayml`, `notion`, and `airbnb` unless the user asks for another direction.
---
## Output Contracts
### Product Design Brief
Use for product planning, feature shaping, IA, flows, and UX:
- Product goal and audience
- Primary jobs-to-be-done
- Information architecture
- Critical flows and states
- Interaction principles
- Success metrics and design risks
- Execution handoff for UI, deck, or prototype work
### Interface / HTML Design Brief
Use for websites, app screens, dashboards, HTML pages, frontend polish:
- Visual direction and reference anchors
- Layout system and responsive behavior
- Color, typography, spacing, radius, shadow, motion tokens
- Component grammar and state rules
- Accessibility and interaction requirements
- Implementation checklist for the frontend agent
### Slide / PPT Design Brief
Use for PPT, HTML deck, pitch deck, report deck, training slides:
- Audience, occasion, and desired audience feeling
- Narrative spine and section rhythm
- Slide count and slide archetypes
- Typography, palette, imagery, chart treatment
- Density rules: what goes on one slide vs. split
- Handoff target: `html-slides` for browser decks or `pptx` for PowerPoint files
### Brand / Art Direction Brief
Use for brand tone, visual identity, campaign look, imagery:
- Visual territories, with one recommended direction
- Palette, type, image, icon, and motion rules
- Example applications
- Do-not-use list
- Handoff needs for image or frontend generation
### Design Review
Lead with findings, ordered by severity:
- What is hurting clarity, trust, polish, conversion, or usability
- Why it matters
- Specific fixes
- Design-system deltas to prevent recurrence
- Test or screenshot checks needed after changes
## Handoff To Execution Skills
Use this skill before execution when the user asks for quality or taste, then pass a compact brief to the builder.
### Handoff To `html-slides`
Provide:
- Deck title, audience, occasion, mood
- Slide count target
- Content outline and known assets
- Preferred references or template tones
- Palette/type/motion constraints
- Required output folder name
- QA requirements: 1280x720, 1440x900, mobile narrow, no slide overflow
### Handoff To `pptx`
Provide:
- Slide count and narrative structure
- Master style: title, section, content, chart, quote, appendix
- Palette, typography, chart treatment
- Required images/icons/logos
- Export and visual QA expectations
### Handoff To Frontend Implementation
Provide:
- Page or component scope
- Existing design system to reuse
- Token deltas only when necessary
- Component/state specs
- Responsive breakpoints and a11y requirements
- Screenshot viewports for QA
## Search Reference
### Available Domains
### Detailed Domains
| Domain | Use For | Example Keywords |
|--------|---------|------------------|
| Domain | Use for | Example keywords |
|---|---|---|
| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
| `react` | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache |
| `landing` | Page structure, CTA strategy | hero, testimonial, pricing, social-proof |
| `chart` | Chart type and data display | trend, comparison, timeline, funnel, pie |
| `ux` | Best practices and anti-patterns | animation, accessibility, z-index, loading |
| `react` | React/Next.js performance | waterfall, suspense, memo, rerender, cache |
| `web` | Web interface guidelines | aria, focus, keyboard, semantic, virtualize |
| `prompt` | AI prompts, CSS keywords | (style name) |
| `prompt` | AI prompts and CSS keywords | style name or visual treatment |
### Available Stacks
### Persisting A Design System
| Stack | Focus |
|-------|-------|
| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
| `react` | State, hooks, performance, patterns |
| `nextjs` | SSR, routing, images, API routes |
| `vue` | Composition API, Pinia, Vue Router |
| `svelte` | Runes, stores, SvelteKit |
| `swiftui` | Views, State, Navigation, Animation |
| `react-native` | Components, Navigation, Lists |
| `flutter` | Widgets, State, Layout, Theming |
| `shadcn` | shadcn/ui components, theming, forms, patterns |
| `jetpack-compose` | Composables, Modifiers, State Hoisting, Recomposition |
---
## Example Workflow
**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
### Step 1: Analyze Requirements
- Product type: Beauty/Spa service
- Style keywords: elegant, professional, soft
- Industry: Beauty/Wellness
- Stack: html-tailwind (default)
### Step 2: Generate Design System (REQUIRED)
For projects that will continue across sessions:
```bash
python3 skills/design/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
python3 skills/design/scripts/search.py "<query>" --design-system --persist -p "Project Name"
```
**Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
This creates:
- `design-system/MASTER.md`
- `design-system/pages/`
### Step 3: Supplement with Detailed Searches (as needed)
For a page-specific override:
```bash
# Get UX guidelines for animation and accessibility
python3 skills/design/scripts/search.py "animation accessibility" --domain ux
# Get alternative typography options if needed
python3 skills/design/scripts/search.py "elegant luxury serif" --domain typography
python3 skills/design/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
```
### Step 4: Stack Guidelines
When building a page, first check `design-system/pages/<page-name>.md`. If it exists, it overrides `MASTER.md`; otherwise follow `MASTER.md`.
```bash
python3 skills/design/scripts/search.py "layout responsive form" --stack html-tailwind
```
## Universal Design Rules
**Then:** Synthesize design system + detailed searches and implement the design.
---
## Output Formats
The `--design-system` flag supports two output formats:
```bash
# ASCII box (default) - best for terminal display
python3 skills/design/scripts/search.py "fintech crypto" --design-system
# Markdown - best for documentation
python3 skills/design/scripts/search.py "fintech crypto" --design-system -f markdown
```
---
## Tips for Better Results
1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app"
2. **Search multiple times** - Different keywords reveal different insights
3. **Combine domains** - Style + Typography + Color = Complete design system
4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues
5. **Use stack flag** - Get implementation-specific best practices
6. **Iterate** - If first search doesn't match, try different keywords
---
## Common Rules for Professional UI
These are frequently overlooked issues that make UI look unprofessional:
### Icons & Visual Elements
| Rule | Do | Don't |
|------|----|----- |
| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |
| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout |
| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths |
| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
### Interaction & Cursor
| Rule | Do | Don't |
|------|----|----- |
| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements |
| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive |
| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) |
### Light/Dark Mode Contrast
| Rule | Do | Don't |
|------|----|----- |
| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) |
| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |
| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |
| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) |
### Layout & Spacing
| Rule | Do | Don't |
|------|----|----- |
| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` |
| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements |
| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths |
---
- Make the artifact specific to its audience and occasion, not generic.
- Prefer a coherent visual system over isolated beautiful elements.
- Do not mix unrelated templates, brands, or component languages.
- Keep enterprise and operational tools dense, calm, and scan-friendly.
- Keep slide decks viewport-safe: split content instead of cramming.
- Use real icons or image assets instead of emoji as UI decoration.
- Use motion for hierarchy and pacing, not for noise.
- Preserve accessibility: contrast, keyboard focus, labels, alt text, and reduced motion.
- Validate with screenshots or previews whenever a visual artifact is produced.
## Pre-Delivery Checklist
Before delivering UI code, verify these items:
### Visual Quality
- [ ] No emojis used as icons (use SVG instead)
- [ ] All icons from consistent icon set (Heroicons/Lucide)
- [ ] Brand logos are correct (verified from Simple Icons)
- [ ] Hover states don't cause layout shift
- [ ] Use theme colors directly (bg-primary) not var() wrapper
### Interaction
- [ ] All clickable elements have `cursor-pointer`
- [ ] Hover states provide clear visual feedback
- [ ] Transitions are smooth (150-300ms)
- [ ] Focus states visible for keyboard navigation
### Light/Dark Mode
- [ ] Light mode text has sufficient contrast (4.5:1 minimum)
- [ ] Glass/transparent elements visible in light mode
- [ ] Borders visible in both modes
- [ ] Test both modes before delivery
### Layout
- [ ] Floating elements have proper spacing from edges
- [ ] No content hidden behind fixed navbars
- [ ] Responsive at 375px, 768px, 1024px, 1440px
- [ ] No horizontal scroll on mobile
### Accessibility
- [ ] All images have alt text
- [ ] Form inputs have labels
- [ ] Color is not the only indicator
- [ ] `prefers-reduced-motion` respected
### Brand Reference Fit
- [ ] Chosen DESIGN.md references match the product context
- [ ] Visual treatment is adapted, not copied literally
- [ ] Enterprise workflows remain readable and efficient
- [ ] Decorative gradients, glass, and heavy motion are justified by the selected direction
- The chosen direction matches the audience and use case.
- The design has one clear primary reference and optional secondary references.
- Tokens and component rules are explicit enough for another skill to execute.
- Layout density is appropriate for the surface.
- Interaction and accessibility rules are covered.
- Anti-patterns are named.
- If handing off, the target execution skill has all inputs needed to build without guessing.