Extracts design specifications from mock images including colors, typography, spacing, and component details
Extracts design specifications including colors, typography, and components from mock images.
npx claudepluginhub a5c-ai/babysitterThis skill is limited to using the following tools:
You are mock-spec-extractor - a specialized skill for extracting comprehensive design specifications from mock images.
This skill analyzes design mock images to extract structured specifications including colors, typography, spacing patterns, and component details that serve as the source of truth for pixel-perfect implementation.
const Vibrant = require('node-vibrant');
async function extractColors(mockPath) {
const palette = await Vibrant.from(mockPath).getPalette();
return {
primary: palette.Vibrant?.hex,
secondary: palette.Muted?.hex,
accent: palette.DarkVibrant?.hex,
background: palette.LightMuted?.hex,
text: palette.DarkMuted?.hex,
allColors: Object.entries(palette)
.filter(([_, swatch]) => swatch)
.map(([name, swatch]) => ({
name,
hex: swatch.hex,
rgb: swatch.rgb,
population: swatch.population
}))
};
}
async function analyzeLayout(mockPath) {
const image = await sharp(mockPath).metadata();
// Detect major sections through edge detection
const edges = await detectEdges(mockPath);
// Identify grid patterns
const gridAnalysis = await detectGridPattern(edges);
return {
dimensions: { width: image.width, height: image.height },
sections: identifySections(edges),
grid: gridAnalysis,
hierarchy: buildHierarchy(sections)
};
}
async function detectTypography(mockPath, regions) {
const textStyles = [];
for (const region of regions) {
// Extract text regions
const textAreas = await findTextAreas(mockPath, region);
for (const area of textAreas) {
textStyles.push({
region: region.name,
estimatedSize: estimateFontSize(area),
estimatedWeight: estimateWeight(area),
color: extractDominantColor(area),
position: area.bounds
});
}
}
return deduplicateStyles(textStyles);
}
async function analyzeSpacing(mockPath, elements) {
const spacingValues = [];
// Analyze gaps between elements
for (let i = 0; i < elements.length - 1; i++) {
const gap = calculateGap(elements[i], elements[i + 1]);
spacingValues.push(gap);
}
// Identify spacing scale
const scale = identifySpacingScale(spacingValues);
return {
scale,
patterns: groupByPattern(spacingValues),
recommendations: suggestCSSVariables(scale)
};
}
async function detectComponents(mockPath) {
const components = [];
// Detect buttons
const buttons = await detectButtons(mockPath);
components.push(...buttons.map(b => ({ type: 'button', ...b })));
// Detect cards
const cards = await detectCards(mockPath);
components.push(...cards.map(c => ({ type: 'card', ...c })));
// Detect inputs
const inputs = await detectInputs(mockPath);
components.push(...inputs.map(i => ({ type: 'input', ...i })));
return components;
}
{
"type": "object",
"required": ["mockSource"],
"properties": {
"mockSource": {
"type": "object",
"properties": {
"type": { "type": "string", "enum": ["image", "figma", "url"] },
"path": { "type": "string" }
}
},
"analysisDepth": {
"type": "string",
"enum": ["basic", "detailed", "comprehensive"],
"default": "detailed"
},
"focusAreas": {
"type": "array",
"items": { "type": "string" }
}
}
}
{
"type": "object",
"properties": {
"success": { "type": "boolean" },
"designSpec": {
"type": "object",
"properties": {
"layout": { "type": "object" },
"typography": { "type": "object" },
"colorPalette": { "type": "object" },
"spacing": { "type": "object" },
"components": { "type": "array" },
"decorativeElements": { "type": "array" }
}
},
"cssVariables": { "type": "object" },
"implementationNotes": { "type": "array" }
}
}
This skill integrates with:
pixel-perfect-implementation.js - Provides mock analysis for convergencedesign-system.js - Extracts design tokenscomponent-library.js - Identifies component patterns/skill mock-spec-extractor \
--mock designs/dashboard-mock.png \
--depth comprehensive \
--focus "header,sidebar,cards"
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.