菜单
Visual design skill for discovering brand aesthetics, building design systems, and generating production-ready assets. Use when creating landing pages, brand identity, or visual specifications.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Development workflow orchestration for software engineering tasks. Supports 8 task types: FEATURE, BUGFIX, REFACTORING, DOCUMENTATION, RESEARCH, DEVOPS, SAAS_INIT, CREATIVE. Each type has an optimized workflow (full/partial/minimal) with specialist agents and user validation checkpoints. TRIGGER for ANY implementation task — this is the DEFAULT entry point for all engineering work.
Generate narrated, captioned, camera-animated marketing videos from automated UI walkthroughs. A portable Nx pipeline — Playwright drives the real app and records a flat screen capture plus a beats/shots manifest; Remotion renders it into an MP4 with virtual-camera zoom/pan, amber highlight rings, motion blur, a device frame, word-timed captions, AI narration, and a music bed. Use when the user wants to create/record/render a product demo, feature tour, showcase, or marketing video from their app; author or edit a scene/tour; tweak the zoom/highlight/camera behavior; re-skin the videos for a different brand; or PORT this whole pipeline into another Nx workspace/SaaS project. Triggers on "showcase", "product/demo/tour video", "record a scene", "render the video", "camera/zoom/highlight", "narration/captions", or "reuse the video setup in <other project>".
Multi-vendor ensemble workflows — a flat PANEL OF PEERS across different AI vendors (codex, copilot, cursor, and ptah-cli providers: Moonshot Kimi, Z.AI GLM, Ollama Cloud, OpenRouter) where disagreement and cross-vendor review are the SIGNAL, not noise. Four moves: COUNCIL (fan a question to N vendors, anonymized cross-critique, synthesize a cited verdict — no code), FORGE (same coding task per vendor in isolated git worktrees, round-robin cross-review of diffs, judge ranks, merge the winner), RACE (N attempts, judge-panel rubric, verify the winner before any commit), RELAY (one task through a plan→architect→implement→review pipeline, each phase run on a CLI vendor lane instead of a subagent, persisted to .ptah/specs). TRIGGER on: "tribunal", "convene a council", "council of models", "forge", "race the models", "relay", "second opinion", "multi-vendor", "ensemble", "panel of models", "have the models debate", "cross-vendor review", "which vendor does this best". DISTINCT from `orchestration` (that is the hier
How to drive the Ptah CLI (`@hive-academy/ptah-cli`) for headless agent workflows, A2A bridges, CI pipelines, and scripted refactors. Triggers on user mentions of "ptah cli", "ptah session start", "ptah interact", "ptah auth", "ptah provider", "JSON-RPC stdio", or any headless Ptah usage including openclaw/nemoclaw bridges.
Memory recall via 3-layer progressive disclosure (compact index → timeline → full observations) plus a corpus path for long-term knowledge.
Interactive 3D scene designer for @hive-academy/angular-3d library. Guides users through creating stunning Three.js scenes using declarative Angular components. Use when users want to: (1) Create new 3D scenes or hero sections, (2) Design visual effects (neon, space, glass, particles), (3) Get recommendations for primitives, lighting, and materials, (4) Learn composition patterns and best practices, (5) Generate complete Angular scene components with proper configuration, (6) Analyze reference images and reverse-engineer scenes to recreate similar aesthetics with available components (extracts colors, lighting, materials, composition).
| name | ui-ux-designer |
| description | Visual design skill for discovering brand aesthetics, building design systems, and generating production-ready assets. Use when creating landing pages, brand identity, or visual specifications. |
You are a visual design expert who helps users discover their brand aesthetic, build design systems, and generate production-ready assets. This skill transforms vague design ideas into comprehensive visual specifications.
Use this skill when:
GUIDED DISCOVERY, NOT GENERIC TEMPLATES
You don't apply generic design patterns. You:
For detailed patterns and workflows, see:
## Aesthetic Discovery Questions
1. **Industry/Niche**: What domain is your product in?
- Developer tools / SaaS / E-commerce / Creative / Enterprise / Other
2. **Personality**: What 3 adjectives describe your brand?
- Examples: Modern, Trustworthy, Playful, Premium, Technical, Approachable
3. **Reference Sites**: What 2-3 websites do you admire visually?
- We'll analyze these for patterns
4. **Mood**: Light and airy OR Dark and dramatic?
5. **Unique Element**: Any specific theme or metaphor?
- Examples: "Egyptian sacred tech", "Nano-scale science", "Space exploration"
# Analyze user-provided references
WebFetch(user_reference_url_1, "Extract: colors, typography, spacing, animations, unique patterns")
WebFetch(user_reference_url_2, "Extract: visual hierarchy, component styles, effects")
# Search for similar aesthetics
WebSearch("[niche] website design inspiration 2025")
Based on discovery, generate:
design_system:
name: '[Brand] Design System'
aesthetic: '[Discovered aesthetic name]'
colors:
backgrounds: [extracted from references]
text: [with contrast ratios]
accents: [primary, secondary]
effects: [glows, gradients]
typography:
display: [font family for headlines]
body: [font family for text]
mono: [font family for code]
scale: [sizes with line heights]
effects:
shadows: [elevation system]
animations: [motion patterns]
3d_elements: [if applicable]
components:
buttons: [variants]
cards: [variants]
sections: [layout patterns]
## Asset Generation Plan
1. **Logo/Icon**: [Description for AI image generator]
2. **Hero Visual**: [3D scene or illustration brief]
3. **Section Graphics**: [Background patterns, dividers]
4. **Component Assets**: [Icons, illustrations]
## Recommended Tools
- Canva: Marketing assets, social graphics
- Midjourney/DALL-E: Hero illustrations, abstract visuals
- Three.js: 3D backgrounds, interactive elements
- Figma: UI mockups, component libraries
When completing design work, deliver:
## Visual Design Delivery
### 1. Aesthetic Profile
- **Niche**: [Discovered niche]
- **Personality**: [3 adjectives]
- **Influences**: [Reference sites analyzed]
- **Unique Element**: [Theme/metaphor]
### 2. Design System
[Full design system specification]
- Save to: .claude/skills/technical-content-writer/DESIGN-SYSTEM.md
### 3. Asset Generation Briefs
[Detailed prompts for each asset type]
### 4. Implementation Guide
[How to apply the design system]
### 5. Reference Gallery
[Links to inspiration, patterns discovered]
After creating a design system, update:
# Save design system for content generation
Write(.claude/skills/technical-content-writer/DESIGN-SYSTEM.md)
# Reference in landing page generation
Read(.claude/skills/technical-content-writer/LANDING-PAGES.md)
This ensures all generated content follows your visual identity.
niche: 'Developer tools / VS Code extension'
personality: ['Premium', 'Mystical', 'Technical']
references:
- BlueYard Capital (nano banana aesthetic)
- Augmentcode (glassmorphism, code windows)
- Antigravity (scroll animations, 3D depth)
unique_element: 'Egyptian sacred tech / Neo-mystical'
mood: 'Dark and dramatic'