Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.
- 📁 assets/
- 📁 references/
- 📄 SKILL.md
Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.
- 📁 bin/
- 📁 docs/
- 📁 examples/
- 📄 SKILL.md
Automated design system construction from repository analysis to production-ready implementation. Analyzes codebases, extracts design patterns, builds token hierarchies with OKLCH color management, implements accessible components with tests, and verifies through multi-reviewer panels.
Guides interactive module design via Q&A before writing. Use when the user wants to design a module, class, or feature together, or when they say "/spec-design".
Design PM-friendly technical architecture for features. No code, only high-level design decisions.
Design and create a new hive task through guided conversation. Walks the user through problem definition, eval design, constraint specification, repo scaffolding, baseline testing with iteration, and upload. Use when user wants to create a new task, add a benchmark, or publish a challenge to the swarm.
- 📁 .cursor/
- 📁 .github/
- 📁 .windsurf/
- 📄 .gitignore
- 📄 AGENTS.md
- 📄 CHANGELOG.md
Design and build websites with film-inspired visual systems, director-driven art direction, storyboard-first layout planning, and cinematic motion. Use when the user asks for a cinematic site, movie-style landing page, director-inspired UI, film-noir, sci-fi, romance, thriller, action, animation, or a movie-like website aesthetic, including requests phrased in Chinese. Do not use for generic web design unless the user explicitly wants a film or director reference.
- 📁 agents/
- 📁 assets/
- 📁 references/
- 📄 ADAPTATION.md
- 📄 LICENSE.txt
- 📄 SKILL.md
Create distinctive, production-grade frontend interfaces with a clear visual direction while respecting project design specification constraints, existing design systems, and minimal-diff engineering boundaries. Use when building or restyling pages, landing screens, dashboards, marketing surfaces, or other frontend UI where visual quality materially affects the result.
- 📄 example-tasks.md
- 📄 existing-task-process.md
- 📄 idea-process.md
Use in pre-implementation (idea-to-design) stages to understand spec/requirements and create a correct implementation plan before writing actual code. Turns ideas into a fully-formed PRD/design/specification and implementation-plan. Creates design docs and task lists in docs/wip/. --- # Task Analysis Process **Goal: Before writing any code, make sure you understand the requirements and have an implementation plan ready.** ## Ideas and Prototypes _Use this for ideas that are not fully thought out and do not have a fully-formed design/specification and/or implementation-plan._ **For example:** I've got an idea I want to talk through with you before we proceed with the implementation. **Your job:** Help me turn it into a fully formed design, spec, implementation plan, and task list. See [idea-process.md](./idea-process.md). ## Continue WIP Feature _Use this to resume work on a feature that already has design docs and a task list in `/docs/wip/`._ **For example:** Let's continue working on the auth system. **Your job:** Review the current state of the feature, understand what's been done and what's next, then proceed with implementation. See [existing-task-process.md](./existing-task-process.md).
- 📁 references/
- 📁 scenarios/
- 📁 scripts/
- 📄 SKILL.md
Generate or edit images via backend Skywork Image API. Use for any image creation, poster design, logo design, visual asset generation, or image modification request. Supports text-to-image and image-to-image editing with aspect ratio and resolution control.
- 📁 references/
- 📁 scripts/
- 📄 SKILL.md
Analyze, re-engineer, or bootstrap projects to align with AI-first design principles. Use when asked to review, audit, improve, 'ai-firstify', or start a new project. Performs deep analysis across 7 dimensions, actively restructures existing projects, or guides new project setup through discovery questions. Based on the 9 design principles and 7 design patterns from the TechWolf AI-First Bootcamp.
Use when documenting architecture, understanding system structure, creating diagrams, or analyzing component relationships. Focuses on interfaces and high-level design. Triggers on: 'use architecture mode', 'architecture', 'system design', 'how is this structured', 'document the system', 'create a diagram', 'high-level overview'. Read-only mode.
