bhawna-design-sync
Tools to bridge the gap between design files and code, ensuring consistent implementation of layout, typography, and state.
Install
mkdir -p .claude/skills/bhawna-design-sync && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/16918" && unzip -o skill.zip -d .claude/skills/bhawna-design-sync && rm skill.zipInstalls to .claude/skills/bhawna-design-sync
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use when translating the Bhawna Foundation Pencil design into implementation, including reading the .pen file, extracting tokens and content, mapping desktop and mobile layouts, or inferring missing component states in the same style.Key capabilities
- →Extract page and section structure from `Bhawna-foundation.pen`
- →Match colors, typography, spacing, and hierarchy from the design
- →Map desktop and mobile variants into responsive React layouts
- →Infer hover, focus, empty, error, and loading states
- →Extract visible copy, image URLs, and key tokens
- →Build reusable patterns per repeated section type
How it works
The skill reads the `.pen` file, extracts structural and design elements like sections, copy, image URLs, and tokens. It then guides the mapping of layouts and inference of missing component states based on design interpretation rules.
Inputs & outputs
When to use bhawna-design-sync
- →Map design tokens to CSS
- →Implement responsive sections from design
- →Extract assets from design files
About this skill
Bhawna Design Sync
Read references/design-map.md before implementing a new page or section.
Use this skill for
- extracting page and section structure from
Bhawna-foundation.pen - matching colors, typography, spacing, and hierarchy
- mapping desktop and mobile variants into responsive React layouts
- inferring hover, focus, empty, error, and loading states when the design does not show them
Workflow
- Read the
.penfile first. If the Pencil app bridge is unavailable, parse the file directly as JSON. - Extract the page sections, visible copy, image URLs, and key tokens before coding.
- Match layout hierarchy first, then visual polish.
- Build one reusable pattern per repeated section type instead of duplicating markup.
- When a state is missing, infer it from nearby patterns and the design tokens in the file.
Design interpretation rules
- Treat desktop and mobile frames as explicit guidance, not optional inspiration.
- Preserve the project's blue, orange, slate, and soft-light palette.
- Keep headings in Poppins and dense UI/body text in Inter unless a later phase changes the decision.
- If a local image path in the
.penfile is unavailable, replace it with a stylistically similar fallback and note the assumption.
Output expectations
- page map
- section map
- token map
- content map
- missing-state assumptions
When not to use it
- →When the design is not from the Bhawna Foundation Pencil design
Limitations
- →The skill is specific to the Bhawna Foundation Pencil design.
- →The skill requires the `.pen` file to be parsable, either directly or via an app bridge.
- →The skill assumes the project's blue, orange, slate, and soft-light palette.
How it compares
This skill provides a specific workflow and design interpretation rules for translating a Bhawna Foundation Pencil design into implementation, including handling missing states, rather than general design-to-code conversion.
Compared to similar skills
bhawna-design-sync side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| bhawna-design-sync (this skill) | 0 | 4mo | No flags | Intermediate |
| ui-ux-pro-max | 1,909 | 5mo | Review | Intermediate |
| scroll-experience | 101 | 6mo | No flags | Intermediate |
| ui-styling | 12 | 9mo | Review | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
ui-styling
mrgoonie
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
elegant-design
rand
Create world-class, accessible, responsive interfaces with sophisticated interactive elements including chat, terminals, code display, and streaming content. Use when building user interfaces that need professional polish and developer-focused features.
figma
openai
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
interaction-design
wshobson
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.