jiapuapp/docs/superpowers/plans/2026-07-13-a01-complete-button-assets.md

A01 Complete Button Assets Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development or superpowers:executing-plans task by task. Steps use checkbox syntax for tracking.

Goal: Replace A01's temporary CSS-and-corner construction with two audited, complete opaque button images that match the approved A01 button proportion.

Architecture: pages/auth/a01-entry.vue remains the owner of button text, icons, agreement gating, and navigation. a01-primary-button.png and a01-secondary-button.png own each button's paper/vermillion surface, double border, and all four corner ornaments; they render as one non-interactive image beneath the DOM content.

Tech Stack: uni-app Vue 3, scoped SCSS, local opaque PNG assets, PowerShell/System.Drawing audits.

Global Constraints

• Use the approved docs/design/screens/A01-启动登录引导-栅格验收-412x915.png only as the visual reference; never crop it into a runtime asset.
• Both final assets are opaque, complete button skins at a 4.492:1 native ratio; preserve DOM labels, icons, events, and agreement behaviour.
• Do not use CSS, SVG, or four independently placed corner images to render the final visible border or ornament.
• Work directly in the current checkout. Do not commit, push, or upload Git changes; the user will do that.
• Change only A01 assets, its page, focused audits, and the affected asset ledger/record.

---

Task 1: Define the complete-button contracts

Files:

• Modify: tests/a01-asset-alpha-audit.ps1
• Modify: tests/a01-a02-ui-contract.ps1

Interfaces: Produces assertions for a01-primary-button.png, a01-secondary-button.png, and a single .entry-button__skin image per A01 button.

• Add a $buttons list containing the two final assets. For each, load the bitmap, require fully opaque four corners, require an aspect ratio within 0.01 of 4.492, and output a pass message. Do not add these assets to the transparent-icon loop.
• Require a01-primary-button.png, a01-secondary-button.png, and entry-button__skin; reject auth-button-corner.png, button-corner-asset, .entry-button::after, and the button CSS background/border construction.
• Verify RED with powershell -ExecutionPolicy Bypass -File tests\a01-asset-alpha-audit.ps1 and powershell -ExecutionPolicy Bypass -File tests\a01-a02-ui-contract.ps1. Both failed because the final assets and page structure did not exist.

Task 2: Generate and audit complete opaque button skins

Files:

• Create: static/assets/foundation/opaque/a01-primary-button.png
• Create: static/assets/foundation/opaque/a01-secondary-button.png

Interfaces: Each asset is a complete opaque PNG skin at 4.492:1. Primary uses muted cinnabar with antique-gold double rules and compact symmetrical corner curls; secondary uses warm rice paper with antique-gold double rules and matching curls. Neither contains copy, icons, a screenshot crop, watermark, or transparency.

• Generate one source for each skin from the approved A01 visual reference. The sources contain no Chinese text, icon, shadow, or external background in the final crop.
• Crop only the generated source's own button surface. The central paper/vermillion field and vertical side rules were extended without scaling the corner artwork; both skins are within 0.01 of 4.492 and contain no cropped A01 reference pixels.
• Verify asset GREEN with powershell -ExecutionPolicy Bypass -File tests\a01-asset-alpha-audit.ps1; all transparent-asset checks and both opaque-button checks pass.

Task 3: Replace the A01 temporary construction and document ownership

Files:

• Modify: pages/auth/a01-entry.vue
• Modify: docs/design/P00_页面结构与资产清单.md
• Modify: docs/交接记录.md

Interfaces: openLogin, prepareWechatLogin, prepareRegister, prepareAgreement, and toggleAgreement remain unchanged. Each .entry-button contains one .entry-button__skin image below .entry-button__content.

• Delete the eight button-corner-asset images and their CSS. Add the primary/secondary .entry-button__skin image as the visual layer inside each button. Remove button borders, pseudo-element inner borders, and button CSS backgrounds; keep dimensions, text, icons, event handlers, and entry-button__content stacking unchanged.
• Replace the two unapproved candidate rows in P00 with the two final opaque assets, their actual dimensions, A01 ownership, page reference, and retained status. Update the handoff record to say that the candidates were replaced locally and that runtime screenshot regression remains pending.
• Verify page GREEN with powershell -ExecutionPolicy Bypass -File tests\a01-a02-ui-contract.ps1, powershell -ExecutionPolicy Bypass -File tests\a01-asset-alpha-audit.ps1, powershell -ExecutionPolicy Bypass -File tests\a01-design-record-audit.ps1, powershell -ExecutionPolicy Bypass -File tests\compile-audit.ps1, and git diff --check. Every command exits 0.

Task 4: Complete local verification

Files: None unless a focused audit exposes a defect.

• Run Get-ChildItem -LiteralPath tests -Filter *.ps1 | Sort-Object Name | ForEach-Object { & powershell -ExecutionPolicy Bypass -File $_.FullName; if ($LASTEXITCODE -ne 0) { exit $LASTEXITCODE } } and git diff --check. All scripts pass and diff check exits 0.
• The user captures unchecked A01 screenshots at 412 × 915 and 320 × 568 in HBuilderX/Android. Do not mark visual acceptance complete until those screenshots confirm the button borders, text placement, and small-screen agreement row.