Menu
SkillsMP has collected 12 skills from mocchalera/mockup-to-code-skill. Open a skill to review its source and details.
Showing 12 of 12 collected skills.
Convert static web-design mockup images (AI-generated or hand-made comp/カンプ, single image or a multi-frame section set) into high-fidelity, responsive HTML/CSS. Three modes: pixel-clone, production, hybrid (default for AI comps — regenerate photo/background…
Build copy hierarchy so words drive layout and rhythm. Use when writing or restructuring headlines, subheads, and microcopy for web pages.
Design motion as comprehension order rather than decoration. Use when adding or revising web animation, interaction timing, section-to-section scroll cues, hero-to-next-section handoffs, reveal sequences, or reduced-motion/JavaScript-off behavior.
Web/UIの余白を計測し、macro/meso/microの階層、vertical rhythm、情報密度、レスポンシブ挙動として設計・実装・検証する。spacing、margin、padding、gap、section間隔、詰まり、間延び、密度、呼吸感、縦リズム、モバイル余白、Tailwindの余白調整、またはmockup-to-codeで計測済みカンプの余白を実装するときに使う。
Source text: Japanese
Audit landing pages for functional production readiness after visual implementation. Use with mockup-to-code or any LP build when verifying links and CTAs, fragment navigation, forms, keyboard Tab/Enter behavior, visible focus, reduced-motion behavior,…
Preserve source-specific photographic storytelling when planning, generating, reviewing, or implementing images for websites and mockups. Use with mockup-to-code or image generation when source subject relationships, gaze, environment, copy space, focal…
Reconstruct source-specific raster texture such as grain, halftone, scanlines, RGB offset, chromatic aberration, edge erosion, distress, and banded glitch while keeping structural text and UI live. Use when a mockup-to-code manifest explicitly sets…
Audit and optimize adopted web image assets without changing art direction. Use after mockup-to-code or another visual implementation has selected final imagery, especially when pages risk multi-megabyte images, missing intrinsic dimensions, weak LCP…
セクション境界、FVから次セクションへの一体感、スクロールしたくなる接続、シームレスな背景接続、SVG区切り、波形区切り、色が繋がらない、境界に線が出る、背景が切れる、LP/marketing page の section seam を設計・実装・検証するスキル。Use when implementing or reviewing an art-directed hero-to-next-section handoff, seamless SVG divider, wave transition, section…
Source text: Mixed languages
CSS/HTMLタイポグラフィを設計・実装・監査する。日本語、英語、日英混植、script/word run単位の文字組み、フォント、行長、行間、約物、禁則、改行、縦書き、fluid/responsive typography、ズーム・リフロー、アクセシビリティ、ブラウザ検証を扱う。タイポグラフィ、文字組み、混植、run、lang、フォント、行間、字間、palt、カーニング、text-wrap、text-autospace、text-spacing-trim、word-break、overflow-wrap、lin…
Source text: Japanese
Inventory every visible device, motif, control, decoration, and composite subpart in raster mockups before CSS implementation. Use for screenshot-to-code, mockup-to-code, design-comp decomposition, pre-CSS visual audits, ROI evidence sheets, and hash-bound…
Web UIを実ブラウザとスクリーンショットで検査し、viewport・状態ごとの重なり、欠け、overflow、余白、整列、タイポグラフィ、色、コントラスト、hover・focus・disabledの視認性を、再現可能な証拠付きIssue Logへ落とし、修正batchと再検証まで実施する。実装済みUIの見た目を監査・修正したい時、リリース前のVisual QA、pixel polish、レスポンシブ崩れの検出に使う。mockup-to-codeでは、最終gate前の独立blind source…
Source text: Japanese