Skip to main content
mock-spec-extractor Extracts design specifications from mock images including colors, typography, spacing, and component details
Aller à l'installation Skills Marketplace Découvrez et explorez les compétences IA créées par la communauté.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Afficher les détails du prompt Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/a5c-ai/babysitter --skill mock-spec-extractorLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Télécharger Zip Téléchargement... Plus depuis ce dépôt Reference for querying the Atlas knowledge graph through its MCP tools — the SECONDARY enrichment/comparison layer that adds best-practice context to systems you have ALREADY scanned from your real sources (`az`, repos, dirs). Use when you need to look up nodes, edges, kinds, clusters, stats, or wiki pages in Atlas to compare against your real inventory. (atlas graph, query atlas, atlas mcp, search the graph, graph neighbors, atlas record, atlas kinds, enrichment layer)
Atlas turns your STATED NEED into a real systems atlas by SCANNING your actual sources (Azure via `az`, git repos, local dirs) and process/data mining them, THEN enriching against the Atlas knowledge graph. Use this skill when asked to inventory/map your real systems, scan your cloud + repos + directories, mine the real processes or data they contain, or collect their real constraints/gotchas. (atlas, scan my systems, inventory our azure account, map my repos, real systems atlas, process mining, data mining, collect nuances, system discovery)
assimilate-popular-workflows This skill should be used when the user asks to "find skills in the wild", "assimilate popular workflows", "discover SKILL.md files in repos", "research external skills", "find workflow patterns", "survey the skill landscape", "what skills exist out there", or wants to investigate public repositories for extractable processes, babysitter plugins, and reusable procedural insights. Searches GitHub for SKILL.md files, classifies repos by archetype, and maintains structured research under docs/reference-repos/.
Métiers associés SOC
Basé sur la classification professionnelle SOC
name mock-spec-extractor description Extracts design specifications from mock images including colors, typography, spacing, and component details allowed-tools Bash(*) Read Write Edit Glob Grep metadata {"author":"babysitter-sdk","version":"1.0.0","category":"design-analysis"} graph {"domains":["domain:web-development"],"specializations":["specialization:ux-ui-design"],"skillAreas":["skill-area:design-systems","skill-area:visual-design"],"roles":["role:product-designer"],"workflows":["workflow:user-feedback-loop","workflow:product-discovery"]}
mock-spec-extractor
You are mock-spec-extractor - a specialized skill for extracting comprehensive design specifications from mock images.
Overview
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.
Prerequisites
Node.js 18+ installed
Image processing libraries (sharp, jimp)
Color extraction libraries (node-vibrant, color-thief)
OCR capabilities for text analysis (optional)
Capabilities
1. Color Palette Extraction
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
}))
};
}
2. Layout Structure Analysis async function analyzeLayout (mockPath ) {
const image = await sharp (mockPath).metadata ();
const edges = await detectEdges (mockPath);
const gridAnalysis = await detectGridPattern (edges);
return {
dimensions : { width : image.width , height : image.height },
sections : identifySections (edges),
grid : gridAnalysis,
hierarchy : buildHierarchy (sections)
};
}
3. Typography Detection async function detectTypography (mockPath, regions ) {
const textStyles = [];
for (const region of 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);
}
4. Spacing Pattern Recognition async function analyzeSpacing (mockPath, elements ) {
const spacingValues = [];
for (let i = 0 ; i < elements.length - 1 ; i++) {
const gap = calculateGap (elements[i], elements[i + 1 ]);
spacingValues.push (gap);
}
const scale = identifySpacingScale (spacingValues);
return {
scale,
patterns : groupByPattern (spacingValues),
recommendations : suggestCSSVariables (scale)
};
}
5. Component Detection async function detectComponents (mockPath ) {
const components = [];
const buttons = await detectButtons (mockPath);
components.push (...buttons.map (b =>type : 'button' , ...b })));
const cards = await detectCards (mockPath);
components.push (...cards.map (c =>type : 'card' , ...c })));
const inputs = await detectInputs (mockPath);
components.push (...inputs.map (i =>type : 'input' , ...i })));
return components;
}
Input Schema {
"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" }
}
}
}
Output Schema {
"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" }
}
}
Process Integration This skill integrates with:
pixel-perfect-implementation.js - Provides mock analysis for convergencedesign-system.js - Extracts design tokenscomponent-library.js - Identifies component patterns
Usage Example /skill mock-spec-extractor \
--mock designs/dashboard-mock.png \
--depth comprehensive \
--focus "header,sidebar,cards"
Best Practices
High-resolution mocks - Use 2x resolution for better analysisClean backgrounds - Solid backgrounds improve detectionConsistent naming - Name regions consistently for trackingValidate extractions - Review and refine extracted specsIterate with feedback - Use scoring feedback to improve extraction 