# Design Process > Briefing, concept development, wireframing, prototyping, visual design, review, and handoff -- the structured path from requirements to finished design. - **Type:** Skill - **Install:** `agentstack add skill-flitzrrr-frontend-design-skills-design-process` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [flitzrrr](https://agentstack.voostack.com/s/flitzrrr) - **Installs:** 0 - **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [flitzrrr](https://github.com/flitzrrr) - **Source:** https://github.com/flitzrrr/frontend-design-skills/tree/main/skills-src/design-process ## Install ```sh agentstack add skill-flitzrrr-frontend-design-skills-design-process ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # Design Process > Projects rarely fail in execution. They fail due to unclear or incomplete briefings. Structure creates space for creativity. ## Scope Use this skill when you: - Structure a design project from the beginning - Capture, validate, or complete a briefing - Create wireframes or prototypes - Use moodboards as a decision-making tool - Prepare the handoff to development - Plan a design review or usability test ## Principles ### 1. Structure Creates Space for Creativity A systematic process prevents creative energy from dissipating into disorientation. ### 2. The Briefing Is Half the Battle Unclear briefings are the most common cause of failed projects. ### 3. Diverge, Then Converge Every phase has an exploratory part (opening options) and an evaluative part (assessing and narrowing options). ### 4. User-Centricity Is Non-Negotiable Design that only pleases the client but ignores the user has failed. ### 5. Differentiation Before Convention Good design requires the courage to deliberately break conventions where it serves the user. ### 6. Iteration Over Perfection Better to show early and gather feedback than to polish in isolation for too long. ### 7. Documentation Is Not an Afterthought Design decisions that are not documented get lost during implementation. ## Rules ### DO: Capture and Validate the Briefing Systematically A complete briefing contains: - **Current State:** What already exists? Why is it no longer sufficient? - **Goals:** What should the design specifically achieve? (formulated as measurable outcomes) - **Target Audience:** Who are the users? (reference to Customer Journey) - **Constraints:** Budget, timeline, technical requirements, corporate design guidelines. - **Competition:** What are competitors doing? What should deliberately differ? - **Success Criteria:** How will success be measured? Review every briefing for contradictions, gaps, and implicit assumptions. ### DO: Follow the 7 Steps of the Design Process 1. **Briefing and Research** — Clarify requirements, gather data, analyze competition. 2. **Strategy and Concept** — Positioning, information architecture, content strategy. 3. **Wireframing** — Structural layouts without visual design. Focus on hierarchy and user flow. 4. **Visual Design** — Colors, typography, imagery, design grid. 5. **Prototyping** — Interactive prototypes for real user flows. 6. **Review and Testing** — Usability tests, accessibility checks, stakeholder feedback. 7. **Handoff and Documentation** — Structured delivery with style guide and specifications. ### DO: Use Moodboards as a Decision-Making Tool - CREATE at least 2 visually distinct directions. - PRESENT them to the client BEFORE moving into visual design. - Moodboards are a basis for discussion, not final deliverables. ### DO: Get Wireframe Approval Before Visual Design - Wireframes clarify structure, hierarchy, and user flow. - Approval at the wireframe level prevents costly structural changes. - Deliberately keep wireframes free of color and imagery. ### DON'T: Jump from Briefing Straight to Visual Design - Without a concept phase, designs emerge that look attractive but fail strategically. ### DON'T: Complete Design in Isolation - SHOW intermediate results early and regularly. - The longer you work without feedback, the greater the risk of misdirection. ### DON'T: Blindly Adopt Trends - Dribbble and Behance trends are inspiration, not blueprints. - Every design element must be justified by a user need or brand strategy. ### DON'T: Hand Off Without Documentation - A Figma link alone is not a handoff. - DOCUMENT: Spacing, interaction behavior, responsive behavior, edge cases, loading states. ## Patterns ### Double Diamond For every non-trivial design project. Diamond 1 (Understand the problem): Discover, then Define. Diamond 2 (Develop the solution): Develop, then Deliver. Ensures the right problem is being solved. See `references/double-diamond.md` for details. ### Design Sprint (5 Days) When a validated solution is needed quickly. Mon: Understand, Tue: Sketch, Wed: Decide, Thu: Prototype, Fri: Test. Result: Validated prototype in one week. ### Styleguide-First For large-scale projects: First define the design system (colors, typography, spacing, components), then assemble pages from it. Result: Consistency, scalability, faster page construction. ### Content-First Design Always. Create text and image concepts BEFORE the layout. Design responds to content, not the other way around. ### Stakeholder Alignment Workshop At project kickoff when multiple decision-makers are involved. 90-minute workshop covering goals, target audiences, expectations, and no-gos. Document the outcome in writing. ## Anti-Patterns ### The Frankenstein Design Elements from various trends and stakeholder wishes thrown together. No clear concept. **Solution:** Define one visual direction and follow it consistently. ### Design by Committee Every stakeholder has equal say in shaping the design. Result: Compromise design. **Solution:** Collect feedback, but one person decides. ### Pixel-Perfect Waterfall Every page fully designed to pixel perfection before the next one begins. **Solution:** Build the system first, then assemble pages. ### Lorem Ipsum Design Layouts with placeholder text. Real content later breaks the layouts. **Solution:** Content-first with real or realistic text. ### Feature Creep Continuously adding new requirements during the process. **Solution:** Lock scope in phase 1. New requirements go into the backlog. ## Checklist - [ ] Briefing complete and reviewed for contradictions - [ ] Target audiences/personas defined - [ ] Competitive analysis conducted - [ ] Information architecture and site structure established - [ ] At least 2 moodboard directions presented - [ ] Wireframes created and approved - [ ] Design system (colors, typography, spacing, components) defined - [ ] Visual design created based on the system - [ ] Responsive behavior defined for all breakpoints - [ ] Interactive prototype created for core user flows - [ ] Usability test conducted with at least 3 users - [ ] Accessibility check passed - [ ] Handoff documentation created - [ ] Style guide documentation up to date ## Cross-References - `customer-journey` — The journey defines which user flows the design must address - `ai-design-workflow` — AI tools support multiple phases of the process - `landing-pages` — Landing pages follow the same process with a focus on conversion - `website-audit` — Audit and relaunch initiate the design process with analysis - `branding-identity` — Brand strategy informs the visual design - `webdesign-review` — Review as quality assurance at the end of the process ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [flitzrrr](https://github.com/flitzrrr) - **Source:** [flitzrrr/frontend-design-skills](https://github.com/flitzrrr/frontend-design-skills) - **License:** MIT Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-flitzrrr-frontend-design-skills-design-process - Seller: https://agentstack.voostack.com/s/flitzrrr - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.