page-designer

Generate a design direction document from vague redesign briefs.

Updated Oct 30, 2025
One-click install
npx skills add https://github.com/juanelojga/juanelojga-webpage --skill page-designer-juanelojga
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: page-designer
Source: https://github.com/juanelojga/juanelojga-webpage/tree/main/.claude/skills/page-designer
Command: npx skills add https://github.com/juanelojga/juanelojga-webpage --skill page-designer-juanelojga

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps designers convert vague redesign ideas into a concrete, implementation-ready design direction document that guides discovery, strategy, and execution across teams.

Core Features & Use Cases

  • Generates a discovery-driven design direction that asks targeted questions and synthesizes answers into a coherent path.
  • Produces a deep design spec in documents/ including creative direction, behavior/animation guidance, responsive rules, component changes, accessibility guardrails, and an implementation plan with acceptance criteria.
  • Ensures output quality through structured, actionable guidance suitable for engineers, designers, and product stakeholders.
  • Provides an implementation roadmap and phase-based plan to drive delivery from concept to production.

Quick Start

Provide a brief redesign brief and I will generate a complete design direction document.

Frequently Asked Questions about page-designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn a vague redesign brief into an actionable design direction document?

To turn a vague redesign brief into an actionable design direction document, provide your initial ideas to generate a comprehensive plan. It synthesizes your brief into discovery questions, executive intent, component-level guidance, and an implementation roadmap.

What is a discovery-driven design direction and when do I need one for a redesign?

A discovery-driven design direction is a structured document that asks targeted questions and synthesizes answers into a coherent creative path. You need one when converting vague redesign ideas into a ready-to-implement strategy across product, UI, and accessibility domains.

How to create a UI design specification that includes accessibility guardrails and motion guidance?

To create a UI design specification with accessibility guardrails and motion guidance, process your redesign brief to produce a deep design spec. This spec covers typography, component changes, behavior/animation rules, and responsive behavior for stakeholders.

Can I use this approach to generate an implementation roadmap for design systems?

Yes, you can generate an implementation roadmap for design systems by processing your redesign brief. It delivers a phase-based plan with acceptance criteria that drives delivery from concept to production for engineers and product stakeholders.

Does this design direction process work without existing design system components or dependencies?

Yes, this design direction process works without existing design system components or dependencies. It operates independently to analyze your vague brief and produce a complete, ready-to-implement design specification document from scratch.

What is the best way to structure a redesign plan for engineering and product teams?

The best way to structure a redesign plan for engineering and product teams is to generate a document containing discovery questions, executive intent, and component-level guidance. This ensures structured, actionable execution across all stakeholders.