28 lines
5.2 KiB
Markdown
28 lines
5.2 KiB
Markdown
# Reconstruct one visual page into editable objects
|
|
|
|
Treat the current visual page as a design reference with explicit source fidelity requirements. Determine the background and asset boundaries before writing native text over it; otherwise old text and newly editable text can coexist invisibly in a background picture.
|
|
|
|
Work inside the mandatory [buildable Skill project](project-workspace.md), including for one page. After the user confirms a sample, apply [approved-mockup fidelity](visual-design.md#approved-mockup-fidelity): retain its content, graphics and relationship-bearing shapes. Necessary quality repairs do not authorize omitting text, figures, diagram nodes, connectors or grouping boundaries.
|
|
|
|
Inventory the page: canvas, fixed UI, text levels, content groups, foreground images/icons, simple geometry/connectors, tables/charts, formulas, decorative patterns and intended layout slots. Keep every text value, evidence value and source asset tied to the user-provided content. Record each object's target type and source.
|
|
|
|
## Background and materials
|
|
|
|
Solid backgrounds, ordinary panels, divider bands, repeated geometric patterns, axes and simple connectors can be authored as native geometry. Reuse a clean image region when it contains none of the foreground that will be rebuilt. For a complex illustration/photo background obscured by replaceable text or objects, use the host image editor to remove only those objects while preserving scene identity, camera, composition, lighting and texture. Inspect the repaired result for invented content and smearing.
|
|
|
|
Keep exact supplied logos, figures and screenshots as independent source assets. Use existing vector or layered assets when available. When visual identity depends on an inseparable bitmap illustration, isolate it through image editing or retain a disclosed image exception, according to the user's editability requirements. Do not replace it with an unrelated icon, approximate illustration or whole-page crop without authorization.
|
|
|
|
## Native reconstruction
|
|
|
|
Start from the selected template layout source, retaining its Master/Layout/placeholder metadata. Recreate normal text as native text with the declared font family and active shared sizes, line spacing and alignment. For an approved mockup, [controlled project adjustments](visual-design.md#controlled-adjustments-for-approved-mockups) allow necessary content-area size, bounds, spacing and fit/alignment repairs with explicit integer/fixed-step values. Preserve its relative spatial relationships, visualization forms, icon identities and text styling, as well as fixed UI and locked structures. Build simple panels, rules, arrows and diagram nodes as separate structural objects. Use the declared template/project grid and shared roles, not pixel-by-pixel ad hoc anchors.
|
|
|
|
When native components or SVG are impractical for faithfully expressing an approved element, [use ImageGen for that element](visual-design.md#elements-that-need-imagegen) with the accepted reference, preserving its appearance, details and relationship cues. Keep it as a separate project asset and disclose the picture exception; do not swap its visualization/icon style, omit it or flatten the whole page. Exact evidence/identity originals retain their own source requirements.
|
|
|
|
Apply [text and container rules](text-and-containers.md) even when the reference image was built differently. Reconstruct a paragraph as one logical text block, preferably one native frame; do not turn each visible source line into an independently positioned box. Repeated container internals use one shared recipe. Essential explanations and limitations stay in the main information hierarchy, and different text functions need size/weight/color distinctions.
|
|
|
|
Use actual data for native charts; if source values are unavailable, preserve the chart as an evidence image and say why. A native table uses native cells; native formulas require actual editable equation objects where the chosen compiler supports them. A formula bitmap, SVG picture or vector outline is still a picture/path exception. Preserve formula meaning and verify symbols against the source before conversion.
|
|
|
|
Preserve crop, aspect ratio and source meaning for image objects. Independently editable text over an unchanged full-page screenshot is not a reconstructed page. Keep repeated UI in inherited layers, rather than covering it with copied slide objects.
|
|
|
|
Build the current SVG through the project's declared builder using [native export](native-authoring.md), then compare the actual rendered page with the accepted design and element inventory at full size and a normal presentation view. Complete the [full-page hierarchy check](visual-design.md#full-page-hierarchy-check), including all font sizes, families, weights, spacing and content groups. After typography/geometry adjustments, complete both [container and page overflow checks](visual-design.md#controlled-adjustments-for-approved-mockups), including actual glyphs/formulas, strokes, clipping and occlusion; repair source, rebuild and inspect again. Check density, line breaks, safe margins, alignment, asset identity and reading order. Native object checks establish object type and inheritance; they do not prove appearance. Complete the requested application checks before claiming editability acceptance.
|