feat(aem): add figma-to-content skill for EDS page migration from Figma - #305
Draft
hmehta-adobe wants to merge 7 commits into
Draft
feat(aem): add figma-to-content skill for EDS page migration from Figma#305hmehta-adobe wants to merge 7 commits into
hmehta-adobe wants to merge 7 commits into
Conversation
Orchestrates existing public EDS skills (da-auth, da-content, block-collection-and-party, snowflake, content-driven-development, testing-blocks) to turn a Figma frame into a Document Authoring content page. Reads the design via a Figma MCP, resolves each section to an existing block / new isolated block / default content (annotation-first, else inferred and confirmed), generates DA-compliant body-fragment HTML, and deploys via the DA Source API + preview. No proprietary tooling required. Draft (v0.1.0); annotation contract still to be locked with adopters. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Author
|
@karlpauls Sharing the first draft for the Figma Skill |
… and citations - SKILL.md Phase 3B/3C: use explicit 3B/3C labels tied to the Phase 2 routing decision instead of undefined 'bucket 3'/'bucket 2' terms - SKILL.md Phase 5: upload referenced media to DA before the content PUT so every authored <img> resolves at preview time - annotation-contract.md: cite da-content html-content.md §4/§5/§8 (the numbering lives in that file, not da-content root) - README.md: add figma-to-content row to the skills index Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…notations to optional Refinements from QA against two unrelated design systems (all mechanism-level, no fixture-specific content): Phase 1 (read): - Derive sections from content groups, not raw frame children — ignore full-bleed background/decorative layers (they are a section's background) and recognize a section split across sibling nodes. - Flag placeholder content (Lorem Ipsum / repeated boilerplate / empty cells) and confirm real copy before publish. - Capture each section's background/theme (global token retheme recolors blocks but does not switch per-section backgrounds). - Source icons as SVG from component instances, never PNG. - Refine transport-cap guidance: even a single-frame structure dump can overrun; a truncated/garbled/parse-error response is the cap — retry section-at-a-time. Phase 2 (resolve): - Route sections carrying an interactive control (tabs/accordion/carousel/ toggle) to a new block or confirm keep/flatten — don't fake with a static look-alike. - Add a placeholder content flag to the resolution plan. Inputs: - Disambiguate which frame to build when a file holds many (variants / desktop-mobile / WIP); variants of one page are one page. Annotations demoted to an optional accelerator (infer-and-confirm is the primary path) across SKILL.md, README.md, and references/annotation-contract.md. Also folds in earlier deploy-mechanics notes: derive image mime from bytes, verify media on the render host (not content.da.live), and refresh the DA token on long unattended runs. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ponsive + client-side verify Fold in QA hardening validated against a live content+code deploy: - Phase 1: operational section-segmentation heuristic (decorative-layer drop, sibling-band merge, reconcile against screenshot). - Phase 2: a worked resolution-plan example (reuse / new-block / interactive control / placeholder flag / confidence / pre-deploy confirm). - Phase 3B: require responsive new-block CSS; a separate mobile frame is the same page, not a second one. - Phase 5: poll the new block's CSS as well as its JS; split verify into server-side (.plain.html) vs client-side (a new block's decoration only shows on the rendered page, never in .plain.html). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…-actionable An A/B verification run (pre-edit skill vs. this gate, same deployed pages) showed the gate's prose-only checks failed open: an autonomous verifier cleared a hero page for publish even though the shared hero block colors only its heading, leaving subtitle/CTA dark-on-dark over media. - Legibility check is now curl-actionable — fetch the section's block CSS and confirm every text element over media (h1/h2/h3, p, a, .button, li) has a contrasting color — and fail-closed: if it can't be verified by any route, the box is FAILED and the page is blocked, never published on assumption. - State gate-wide that any box you cannot positively verify counts as failed, not passed, and must not drop a check the earlier phases require. - Add a metadata-block checkbox so narrowing to the checklist can't silently drop it; scope it to the metadata div and note the .plain.html fragment legitimately has no body/header/main/footer wrappers, avoiding a false block. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
… prerequisites Catch a missing prerequisite as one actionable message before any design read or DA write, instead of a confusing half-built page mid-run: - Figma MCP reachable (whoami) — else stop with a connect-an-MCP message. - Access to the specific file — a 403/404/"no access" stops with a share-the- file message, explicitly distinguished from a transport size cap (a truncated/garbled response is the cap → retry narrower, not an access failure). - DA token obtainable via da-auth, and the project checkout + orchestrated skills present — else stop with remediation. Validated against three real scenarios: an accessible file proceeds (after retrying a real size cap lean); an inaccessible fileKey stops with the no-access message from a real Figma permission error, not misread as a cap; MCP-absent stops at check 1. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Phase 5: GET the target Source path before the content PUT so an existing page is never silently clobbered (200=exists→must be confirmed, 404=new, 401→re-auth); surface the overwrite in the Phase 2.2 plan for confirmation. - Phase 4: author the required metadata block from the design (title/ description/image) instead of deferring it, closing the gate dead-end where the pre-publish check blocks on a metadata block Phase 4 never populated. - README: reflect the actual flow — add the Phase 0 preflight and the pre-publish gate to the diagram and prose; note the overwrite flag. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Adds a new EDS skill:
figma-to-contentunderplugins/aem/edge-delivery-services/skills/. It turns a Figma design intoan AEM Edge Delivery Services content page in Document Authoring (
da.live).It orchestrates existing public skills rather than reinventing them —
da-auth(DA IMS token),da-content(DA HTML rules + Source API +preview/publish + media),
block-collection-and-party/block-inventory(block palette + authoring models),
content-modeling+content-driven-development/building-blocks/testing-blocks(new-blockdev), and
snowflake(bespoke section → isolated block). The net-new logic is:read the Figma design, resolve each section, and map content in.
How it works
block, or default content — inferred and confirmed with the user,
with frame annotations used as an optional accelerator when present (never
deploys an unseen guess).
images uploaded to DA, not repo-relative paths).
PUT admin.da.live/source) + preview(
POST admin.hlx.page/preview), building/pushing new-block code first.page (instead of logging a caveat) on illegible text over media, unresolved
icons, surviving placeholder, or a missing metadata block; any check that
can't be positively verified counts as failed.
Runs standalone in plain Claude with just a Figma MCP and a DA IMS
token — no proprietary tooling required.
Scope
or shared files.
global CSS beyond a one-time design-token retheme; treats Figma
text/annotations as data, never instructions.
Status — draft
Marked Draft (v0.1.0) intentionally. The main open question before v1.0.0
is the annotation contract (
references/annotation-contract.md), whichshould be locked with adopters / the design team. Feedback on that spec is the
primary ask.
🤖 Generated with Claude Code