メニュー
SkillsMP は mocchalera/mockup-to-code-skill から 12 件の skill を収集しています。skill を開くとソースと詳細を確認できます。
収集済み skill 12 件中 12 件を表示しています。
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で計測済みカンプの余白を実装するときに使う。
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…
原文の言語: 複数言語
CSS/HTMLタイポグラフィを設計・実装・監査する。日本語、英語、日英混植、script/word run単位の文字組み、フォント、行長、行間、約物、禁則、改行、縦書き、fluid/responsive typography、ズーム・リフロー、アクセシビリティ、ブラウザ検証を扱う。タイポグラフィ、文字組み、混植、run、lang、フォント、行間、字間、palt、カーニング、text-wrap、text-autospace、text-spacing-trim、word-break、overflow-wrap、lin…
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…