feat(skills): add Product Hunt front-page launch card#18
Draft
wuwangzhang1216 wants to merge 1 commit into
Draft
feat(skills): add Product Hunt front-page launch card#18wuwangzhang1216 wants to merge 1 commit into
wuwangzhang1216 wants to merge 1 commit into
Conversation
…nch card A new skill that renders Product Hunt launches as Sunday-newspaper front pages instead of the usual rounded-orange SaaS card. Aligns with the project's editorial signature established by deck-guizang-editorial, magazine-poster, and doc-kami-parchment. Design moves: - "PRODUCT HUNT TIMES" masthead with star ornaments + double rule (1px hairline + 4px ink), Playfair Display 700 wordmark. - Editorial kicker "MAKER OPINION ·· LAUNCH DAY ·· nexu-io#1 PRODUCT OF THE DAY" in JetBrains Mono uppercase letterspace 0.18em. - Big serif headline (Playfair Display 60px) with one italic accent word in brick-orange #c2492c. - Italic Playfair lede, single tight paragraph. - Two-column body grid with hairline divider — left: editorial number treatment of upvote / comments / views with hairline separators; right: Hunter's Note pull-quote in Playfair italic + em-dash byline + middle-dot-separated topics (no pills, no rounded corners). - Newspaper-style byline footer: HUNTED BY @handle · MAKER stamp · 32 makers · 12 countries · LIVE NOW with blink dot. Hard-locked design system (mirrored in SKILL.md and example.html): - 5 hex tokens only: paper #f3eee2, tint #ece5d3, ink #1f1c17, muted #6e6a5d, rule #d3cdbe, accent #c2492c. - 3 font families with strict roles: Playfair Display (display + lede italic + big numbers), Inter (body + kicker), JetBrains Mono (mono with tnum for metrics / folio / dateline). - 0 drop-shadow, 0 gradient backgrounds, 0 corner-radius >= 4px, 0 blur — all forbidden in SKILL.md prompt body and absent from example.html. - Subtle 16px radial-dot grain pattern overlaid on the paper bg. Files (one folder, no registration step — picker auto-discovers via src/lib/templates/loader.ts): - SKILL.md — frontmatter (zh_name, en_name, category=card, scenario=marketing, aspect_hint=1200x630, 6 tags) + prompt body enforcing the hard constraints above. - example.html — hand-authored 1120x~660 OG card showing html-anything itself as the launching product (self-referential). - example.md — launch-context input shape, designed to teach the agent how to elevate a tagline into editorial headline + lede. Validates against the CONTRIBUTING merge bar: 1. Real example.html ships in the folder. 2. Renders cleanly in Chrome headless at 1200x720; screenshot in PR. 3. Hard constraints are specific (hex codes, font-stack roles, px sizes, letter-spacing, line-height — not "use modern fonts"). 4. No lorem ipsum; example uses real product copy. 5. Slug uses ASCII lowercase with dashes, mirrors social-x-post-card, social-spotify-card, social-reddit-card. 6. Not vendored from another repo — no third-party LICENSE to ship.
lefarcen
added
size/M
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
2 participants
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.
Summary
A new skill —
social-product-hunt-card— that renders Product Hunt launches as Sunday-newspaper front pages instead of the usual rounded-orange SaaS card. Sits inside the editorial signature already established bydeck-guizang-editorial,magazine-poster, anddoc-kami-parchment: Playfair Display + warm paper + brick accent + 1px hairlines, zero shadows / gradients / round corners.The signature design move — "today's launch as front-page news": masthead with star ornaments and a 1px+4px double rule, big italic-accented serif headline, Playfair-italic lede, two-column body grid (editorial number stack on the left + Hunter's Note pull-quote on the right), middle-dot-separated topics (no pills), newspaper byline footer with
LIVE NOWblink dot.Hard-locked design system
Mirrored in
SKILL.mdandexample.html:#f3eee2, tint#ece5d3, ink#1f1c17, muted#6e6a5d, rule#d3cdbe, accent#c2492c(brick-orange, between PH brand#DA552Fand editorial#b85a3a— preserves PH brand recognition without going garish).tnum(metrics, dateline, folio).Files
One folder; no registration step (picker auto-discovers via
src/lib/templates/loader.ts):src/lib/templates/skills/social-product-hunt-card/SKILL.mdcategory: card,scenario: marketing,aspect_hint: 1200×630, 6 tags) + prompt body locking the design system above.src/lib/templates/skills/social-product-hunt-card/example.htmlsrc/lib/templates/skills/social-product-hunt-card/example.mdCONTRIBUTING merge-bar (per
CONTRIBUTING.md)example.htmlships in the folderlorem ipsum; example uses real product copysocial-x-post-card,social-spotify-card,social-reddit-cardTest plan
pnpm dev→ open picker → confirmProduct Hunt 头版报appears under the Card / 卡 group#f3eee2, brick accent#c2492c, Playfair masthead, 1px hairlines, no shadows, no rounded corners ≥ 4px.pngexport works against the generated cardWhy this skill
The catalog already has
social-x-post-card,social-reddit-card,social-spotify-card— but no Product Hunt launch card, the single most-shared social artifact in dev-tool launches. And rather than mimic producthunt.com's UI (every PH-launch screenshot already does that), this skill reframes the moment: launch day is news, so the card is a newspaper front page. That's the signature. It also gives the project itself a ready-to-use OG card for its own eventual PH launch.