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.