What is Amie on explainx.ai?

Amie's design system is "The Joyful Productivity App." It is a playful, colorful, and highly approachable environment that blurs the line between a calendar, a to-do list, and a social network. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.

DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).

How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?

Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.

Where is the source repo?

Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.

How current is this DESIGN.md?

Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.

Need a fresh DESIGN.md from scratch?

Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

What is Amie on explainx.ai?

Amie's design system is "The Joyful Productivity App." It is a playful, colorful, and highly approachable environment that blurs the line between a calendar, a to-do list, and a social network. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.

DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).

How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?

Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.

Where is the source repo?

Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.

How current is this DESIGN.md?

Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.

Need a fresh DESIGN.md from scratch?

Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

What is Amie on explainx.ai?

Amie's design system is "The Joyful Productivity App." It is a playful, colorful, and highly approachable environment that blurs the line between a calendar, a to-do list, and a social network. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.

DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).

How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?

Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.

Where is the source repo?

Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.

How current is this DESIGN.md?

Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.

Need a fresh DESIGN.md from scratch?

Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

What is Amie on explainx.ai?

Amie's design system is "The Joyful Productivity App." It is a playful, colorful, and highly approachable environment that blurs the line between a calendar, a to-do list, and a social network. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.

DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).

How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?

Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.

Where is the source repo?

Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.

How current is this DESIGN.md?

Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.

Need a fresh DESIGN.md from scratch?

Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

What is Amie on explainx.ai?

Amie's design system is "The Joyful Productivity App." It is a playful, colorful, and highly approachable environment that blurs the line between a calendar, a to-do list, and a social network. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.

DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).

How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?

Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.

Where is the source repo?

Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.

How current is this DESIGN.md?

Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.

Need a fresh DESIGN.md from scratch?

Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

What is Amie on explainx.ai?

Amie's design system is "The Joyful Productivity App." It is a playful, colorful, and highly approachable environment that blurs the line between a calendar, a to-do list, and a social network. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.

DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).

How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?

Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.

Where is the source repo?

Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.

How current is this DESIGN.md?

Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.

Need a fresh DESIGN.md from scratch?

Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

What is Amie on explainx.ai?

Amie's design system is "The Joyful Productivity App." It is a playful, colorful, and highly approachable environment that blurs the line between a calendar, a to-do list, and a social network. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.

DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).

How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?

Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.

Where is the source repo?

Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.

How current is this DESIGN.md?

Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.

Need a fresh DESIGN.md from scratch?

Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

What is Amie on explainx.ai?

Amie's design system is "The Joyful Productivity App." It is a playful, colorful, and highly approachable environment that blurs the line between a calendar, a to-do list, and a social network. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.

DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).

How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?

Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.

Where is the source repo?

Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.

How current is this DESIGN.md?

Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.

Need a fresh DESIGN.md from scratch?

Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

What is Amie on explainx.ai?

Amie's design system is "The Joyful Productivity App." It is a playful, colorful, and highly approachable environment that blurs the line between a calendar, a to-do list, and a social network. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.

DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).

How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?

Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.

Back to designs

DESIGN.md · explainx registry

Amie

Amie's design system is "The Joyful Productivity App." It is a playful, colorful, and highly approachable environment that blurs the line between a calendar, a to-do list, and a social network.

Design System#design#ui#ux#template

Get a custom design.md for your product

DESIGN.md (markdown body)

name	Amie
colors	background: "#ffffff" foreground: "#111111" brand: "#ff6363" # Amie Pink/Red muted: "#888888" border: "#f5f5f5" card: "#ffffff" accent: "#7c3aed" # Amie Purple dark: background: "#111111" foreground: "#ffffff" muted: "#666666" border: "#222222" card: "#1a1a1a" accent: "#7c3aed"
typography	fontFamily: sans: "Inter, system-ui, -apple-system, sans-serif" body: fontSize: "15px" lineHeight: "1.5" fontWeight: "400" heading: fontWeight: "700" letterSpacing: "-0.01em"
rounded	default: "12px" md: "16px" lg: "24px" full: "9999px"

Design System: Amie

Overview

Amie's design system is "The Joyful Productivity App." It is a playful, colorful, and highly approachable environment that blurs the line between a calendar, a to-do list, and a social network.

Design Philosophy

Productivity as Joy: Rejects the "cold" productivity aesthetic for one that is warm, bouny, and delightful.
Soft Tactility: Uses large border radii (12px+) and soft background colors to feel friendly and human.
Vibrant Personality: Integrates emojis, avatars, and playful animations as core parts of the user experience.
Seamless Integration: Designed to make "scheduling a coffee" feel as easy as sending a message.

Colors

Amie Pink/Red (#FF6363): A warm, high-energy accent used for the brand logo and primary actions.
Pastel Palette: Uses a wide range of soft pastels for different task categories and calendar events.
Clean Grays: Uses very light, warm greys for backgrounds and borders to keep the UI feeling airy.

Typography

Inter: Provides a stable, readable foundation for the playful UI elements.
Bold Friendliness: Uses heavy weights for headers and "Success" states to create a confident, positive voice.

Components

The "Magic" Task Bar: A bottom-anchored, highly-rounded bar that allows for fast task entry and drag-to-calendar.
User Avatars: Large, colorful circular images with integrated status indicators.
Event Tiles: Soft, rounded rectangles with integrated emojis and high-contrast text.

Visual Effects

Bouncy Animations: Uses spring-based motion for dragging tasks and opening menus to reinforce the "joyful" feel.
Soft Glows: Uses subtle background glows for active tasks or notifications.
Confetti: Occasional use of celebratory animations for reaching "Inbox Zero" or completing goals.

Usage

Copy DESIGN.md into your project or paste it into your IDE agent chat.
Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.

Common questions

What is Amie on explainx.ai?: Amie's design system is "The Joyful Productivity App." It is a playful, colorful, and highly approachable environment that blurs the line between a calendar, a to-do list, and a social network. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
What is DESIGN.md?: DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?: Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
Where is the source repo?: Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
How current is this DESIGN.md?: Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.
Need a fresh DESIGN.md from scratch?: Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.

Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.

Reference →DESIGN.md generator →Skills registry →

List Your Design.md

Share your design system with AI agents worldwide

GET_STARTED →