skills.rest
sadie100
sadie100COMMUNITY
Explore all skills by this author →
GitHub

cafe24-update

Compare Cafe24 project UI against Figma specifications and generate code modifications.

Updated Apr 8, 2026
Search Tags:#code generation#Figma#UI verification#live preview#Cafe24
One-click install
npx skills add https://github.com/sadie100/claude-dotfiles --skill cafe24-update
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cafe24-update
Source: https://github.com/sadie100/claude-dotfiles/tree/main/skills/cafe24-update
Command: npx skills add https://github.com/sadie100/claude-dotfiles --skill cafe24-update

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, figma-js, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill simplifies the process of updating and verifying UI elements in Cafe24 projects against a Figma specification, allowing users to ensure UI consistency without manual testing.

Core Features & Use Cases

  • UI Verification: Automatically compare Cafe24 project UI against Figma specifications.
  • Live Preview: View UI changes live in the browser for immediate feedback.
  • Code Preparation: Generate precise code modifications based on UI discrepancies, ready for integration into the project.

Quick Start

Run the "cafe24-update" command with a test server URL and a Figma node link to verify the UI.

Frequently Asked Questions about cafe24-update

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I verify my Cafe24 project UI against a Figma design specification?▼

To verify a Cafe24 project UI against a Figma specification, you need to provide a test server URL, a Figma node link, and a target viewport to automate the comparison and identify UI discrepancies.

Can I preview UI changes in a live browser before updating my Cafe24 project code?▼

Yes, you can preview UI changes in a live browser. The Skill uses Puppeteer to render a live preview of the proposed UI modifications before any actual code is integrated into the Cafe24 project.

Does this tool generate code modifications for UI discrepancies found between Cafe24 and Figma?▼

Yes, the tool generates precise code modifications. It automatically analyzes the differences between the live Cafe24 UI and the Figma spec, then prepares the exact code changes needed for integration.

What do I need to automate Figma and Cafe24 UI comparison for different viewports?▼

You need a Cafe24 project URL, a Figma node link, and a target viewport size. The tool uses these inputs alongside Figma API integration and browser scripting to automate the UI comparison.

Are there limitations when using browser scripting to compare Figma specs with a live Cafe24 test server?▼

The main limitation is that the UI comparison requires a running Cafe24 test server URL and a valid Figma node link; without these, the browser scripting and Figma API integration cannot execute the verification.

Is puppeteer required to generate code modifications from Figma node links for Cafe24?▼

Yes, Puppeteer is required. It provides the live browser preview environment needed to verify the Cafe24 UI changes against the Figma specification before generating the final code modifications.

Related Skills

Explore More Design & Creative Skills→
sadie100sadie100

cafe24-figma-validate

Validate Cafe24 page components against Figma designs and auto-fix mismatches.

Community
Advanced
JaivishChauhanJaivishChauhan
6

deploy-ship

Automate production deployments of Next.js apps to Vercel via CLI.

Community
Intermediate
serkan-ozalserkan-ozal
7

visual-testing

Detect visual discrepancies between live pages and Figma design references.

Community
Intermediate
BURHANDEV-ENTERPRISEBURHANDEV-ENTERPRISE

mop-ui-clone

Extract HTML structure, CSS design tokens, and 3D assets from websites.

Official
Advanced