nextlevelbuilder

UI のスキルを 5 つ同じ条件で比べたら、案外スキルなしが良かった Claude Code 向けの人気の UI スキルを 5 つ選び、スキルなしも入れた 6 組で、同じ LP を作らせました。 モデルもプロンプトも同じにして 3 回ずつ回し、どれがどのスキルかを伏せて、私が見比べました。 3 回とも一番は UI UX Pro Max で、2・3 回目は次にスキルなしが来ました。 残りの 4 つのスキルは、スキルなしより下に見えた回が多くなりました。 taste-skill や Hallmark はもっと良いと思っていたので、意外な結果でした。 この記事で分かることは、次の 3 つです。 5 つの UI スキルで、日本語のキャンペーン LP がどう変わったか（実際の画面） スキルのほかの条件をそろえて比べる回し方 スキルなしが案外良かった理由についての、私の考え 厳密な採点はしていない、私 1 人の主観の比較です。 スキルがブラウザで画面を見て直す工程も止め、作るところまでで比べました。 比べた 5 つの UI スキル Claude Code には、UI を作るためのスキルがたくさん出ています。 どれを入れればいいのか、入れると何が変わるのかを知りたくて、人気の上位から 5 つを選びました。 スキル ひとことで スター（10/29） frontend-design Anthropic 公式。書く前に、美的な方向を 1 つ決めさせる 184,525（リポジトリ全体） UI UX Pro Max スタイル・配色・書体の組み合わせのデータを検索して、デザインを組む 142,099 taste-skill 「AI っぽさ」を避ける。調べておいた方向性の中から 1 つを選んで当てる 104,511 Impeccable デザインの語彙と、AI っぽい UI を見つける規則を与える 92,762 Hallmark 素材から選んで組み、AI っぽい癖を確かめて仕上げる 40,768 選ぶときは、UI スキルを紹介する記事の上位と、GitHub のスターの数を目安にしました。 どれも 10 月 29 日に GitHub から取った版です。 5 つとも海外の作者のスキルで、中の例も英語です。 比べ方: スキルのフォルダのほかは、全部そろえる 比べたいのは、スキルだけで何が変わるかです。 そこで、モデル・プロンプト・画像・道具を 6 組でそろえ、違うのはスキルのフォルダの中身だけにしました。 題材は、架空の焙煎所のキャンペーン LP 題材は、海辺の町の架空の珈琲焙煎所「凪灯珈琲焙煎所」の、冬のキャンペーンの LP です。 SaaS のサービスサイトではなく、一般の人に向けた日本語の LP にしました。 キャンペーンの LP には、期間・条件・特典の段・商品・よくある質問と、見せ方の違う中身がそろっています。 どのスキルも中の例が英語なので、日本語の組み方でも差が出ると考えました。 中身は 6 組とも同じブリーフ（店・期間・特典の 3 段・商品 4 点・参加の 3 ステップなど）で渡しました。 商品の写真とキービジュアルの 5 枚は、前もって作って全部の組に同じものを渡しています。 6 組に渡したプロンプト（スキルの組は、頭に /スキル名 の 1 行を足した）架空の珈琲焙煎所の、冬のキャンペーンのランディングページを作ってください。 - 中身: このフォルダの BRIEF.md の文言と数字を使う。足りない文言は書き足してよいが、数字・日付・条件は変えない - 出すもの: このフォルダの index.html 1 枚。HTML・CSS・素の JavaScript だけで書き、ビルドはしない。外の JavaScript や CSS のライブラリは読み込まない。Web フォントの読み込みはよい - 画像: assets/ にある 5 枚だけを使う（中身は assets/README.md）。ほかの画像は取ってこない・作らない。SVG の飾りやアイコンは自分で書いてよい - 見る人: 主にスマホ。PC で開いても崩れないこと - この環境では、ネットへの接続と、ブラウザを動かす検査は使えない - 質問はしないで、最後まで作る。決めたことと選んだ方向は、NOTES.md に短く書く 6 組に渡したブリーフ（BRIEF.md。店・商品・数字はすべて架空）# ブリーフ: 凪灯珈琲焙煎所「冬のあかりギフト」キャンペーン LP 店 - 名前: 凪灯珈琲焙煎所（なぎひ こーひー ばいせんじょ） - 海辺の町の小さな焙煎所。毎週火曜に焼いた豆だけを、その週のうちに出荷する - オンラインストアで豆とドリップバッグを売っている キャンペーン - 名前: 冬のあかりギフト - 期間: 2026年11月14日（土）〜2026年12月25日（金） - エントリー制。参加にはエントリーが要る。エントリーの前に買ったものは対象外 - 期間中のオンラインストアでの購入金額（税込・送料を除く・合計）で、特典が 3 段で上がる 特典（購入金額の合計で決まる。上の段は下の段の特典も含む） | 購入金額の合計 | 特典 | |---|---| | 3,000円以上 | ドリップバッグ 5 袋 | | 5,000円以上 | ＋ 凪灯のオリジナルマグ | | 8,000円以上 | ＋ 冬限定ブレンド 200g（非売品） | 対象商品（4 点。価格はすべて税込） | 商品 | 煎り | 量 | 価格 | 画像 | |---|---|---|---|---| | 冬灯りブレンド | 深煎り | 200g | 1,620円 | assets/product-winter-blend.png | | エチオピア ウォッシュト | 浅煎り | 200g | 1,890円 | assets/product-ethiopia.png | | カフェインレス 夜凪 | 中煎り | 200g | 1,780円 | assets/product-decaf.png | | ドリップバッグ 10 袋入り | 中煎り | 10 袋 | 1,350円 | assets/product-dripbag.png | 参加の流れ（3 ステップ） 1. エントリーする（ボタンから。会員登録が要る） 2. 期間中に対象商品を買う（何回に分けてもよい。合計で判定） 3. 2027年1月15日（金）までに、特典が商品とは別に届く よくある質問 （エントリー前の購入・合算・店頭での購入・届く日の 4 つ。省略） 注意事項 - エントリーは 1 人 1 回です - 特典は数に限りがあり、なくなり次第終わります - 価格はすべて税込です。送料は別で、購入金額の合計には入りません - 返品した商品の金額は、合計から除きます 入れてほしい区画 ヒーロー、キャンペーンの概要、参加の 3 ステップ、特典の段の表、対象商品、よくある質問、注意事項、エントリーと購入のボタン（画面の下に固定するかは任せる） ボタン - 主: 「エントリーする」（リンク先は #entry） - 副: 「対象商品を見る」（リンク先は #products） スキルのほかを切った回し方 ふだんの環境のまま回すと、私の CLAUDE.md やほかのスキル、MCP の道具まで一緒に読まれます。 それでは、スキルの差なのか環境の差なのか分かりません。 そこで、組ごとに空のフォルダを作り、.claude/skills/ にはその組のスキルだけを入れて、claude -p で回しました。 ユーザーの設定と MCP は読ませず、権限は起動の引数で渡しています。 1 回分の起動のしかた（Claude Code 2.1.314） cd <組のフォルダ> # BRIEF.md・prompt.txt・assets/・.claude/skills/<スキル>/ だけがある claude -p "$(cat prompt.txt)" \ --settings <権限の JSON> \ --model claude-sonnet-5-5 --effort high \ --setting-sources project \ --strict-mcp-config \ --tools "Read,Write,Edit,Glob,Grep,Bash,Skill,Agent,TodoWrite" \ --permission-mode acceptEdits \ --output-format stream-json --verbose \ --no-session-persistence < /dev/null --setting-sources project: ユーザーの設定（CLAUDE.md・出力スタイル・ユーザーのスキル）を読まず、フォルダの中だけを読む --strict-mcp-config: MCP の設定を渡していないので、MCP の道具は 1 つも入らない --tools: 6 組で同じ道具にする。WebFetch・WebSearch は入れていない プロンプトの頭の 1 行: /frontend-design・/ui-ux-pro-max・/design-taste-frontend（taste-skill）・/impeccable・/hallmark。呼ばれずに終わるのを防ぐため、名前で呼んだ 権限の JSON は、ふだんの道具を許し、ネットとブラウザに出るものだけを止める形です。 { "permissions": { "allow": ["Bash", "Read", "Write", "Edit", "Glob", "Grep", "Skill", "Agent", "TodoWrite"], "deny": [ "WebFetch", "WebSearch", "Skill(design)", "Skill(design-sync)", "Skill(dataviz)", "Bash(curl *)", "Bash(wget *)", "Bash(npx *)", "Bash(npm *)", "Bash(git *)", "Bash(*)", "Bash(*)", "Bash(assets.mjs)", "Bash(inspect.mjs)", "Bash(imagegen.mjs)", "Bash(--render)", "Bash(chrome)", "Bash(puppeteer)", "Bash(playwright)" ] } } Skill(design) などは、Claude Code に最初から入っているスキル。比べるスキルに混ざらないよう止めた 確かめたこと: 別に 1 回だけ「読んでいる指示は何か」と聞き、私の CLAUDE.md の中身を知らないことを確かめた。最初のリクエストの大きさで、スキルが入ったことも確かめた（スキルなしは 12,774 トークン、スキルの組は 16,025〜26,459 トークン） 途中で 2 つつまずきました。 --bare が一番まっさらに近いのですが、API キーでしか動かず、サブスクの枠では回せませんでした フォルダに置いた .claude/settings.json の allow は、信頼していないフォルダでは無視されました（deny は効く）。そのため権限は --settings で渡しています ネットとブラウザを止めたので、taste-skill・Hallmark・Impeccable が持っている「ブラウザで画面を見て直す」工程は使えていません。 どれも、作る途中で画面を見て直すのが大事な工程として書かれています。 この比較で分かるのは、その工程を止めて、作るところまでで比べた結果です。 見比べ方 1 組 3 回、合わせて 18 枚の LP を、スマホ幅（390px）と PC 幅（1440px）で撮りました。 回ごとに組を A〜F の記号に並べ替え、どれがどのスキルかを伏せて、私が見比べました。 結果: 一番は 3 回とも UI UX Pro Max、2・3 回目の次はスキルなし 回 一番 次 下のほうに見えた組 1 回目 UI UX Pro Max Impeccable taste-skill・Hallmark・frontend-design 2 回目 UI UX Pro Max スキルなし frontend-design・Hallmark・Impeccable・taste-skill 3 回目 UI UX Pro Max スキルなし frontend-design・Impeccable・Hallmark・taste-skill 1 回目のスキルなしには、所感を残していません。 1 回目の 6 組の、スマホ幅の最初の 2 画面ぶんです。 1 回目のスマホ幅（390px）。並びは左から スキルなし・frontend-design・UI UX Pro Max・taste-skill・Impeccable・Hallmark PC 幅の最初の画面です。 1 回目の PC 幅（1440px）の最初の画面 どの組も、キービジュアルの近くにエントリーの導線を置き、節ごとにボタンを置いていました。 どの案も節の区切りを波線にしていて、これは「凪」と「海辺の町」から海を連想したのだと思います。 世界観の作り方は、スキルよりもブリーフで決まっていた印象です。 価格・期間・特典の段・ボタンの文言は、18 枚とも抜けや書き換えがありませんでした。 ページの文字にブリーフの数字や文言があるかを、機械で照らした結果です。 ブリーフの写しでは差が付かず、差が出たのは見た目と構成でした。 見比べたときに書き留めた所感です。 UI UX Pro Max: 一番バランスがいい。商品の見せ方も含めて、比較的 AI っぽさがマシ ただ、PC 版の参加の流れで、1 から 3 にかけて箱が小さくなっていく理由はよく分からない taste-skill: 「よくある質問」や「注意事項」がデカデカとしすぎ。2 回目は、ちょっとパワポっぽい 3 回目の特典の 3 段は階段の表現になっていて、イメージに近い Hallmark: 数字の見せ方が SaaS っぽくて、EC 向きではない。3 回目は暖色と寒色の差が激しすぎる Impeccable: 1 回目は UI UX Pro Max と迷うくらい良かったのに、2・3 回目はビビッドすぎて世界観に合わない frontend-design: 余白の使い方が分からない。3 回目は「火曜日」にフォーカスが当たりすぎて、情報の強弱が分かっていない スキルなし: 2 回目は UI UX Pro Max と迷うくらい。3 回目も悪くない（ただ、PC 幅でキービジュアルと次の節の切れ目に紺の帯が残っていて、そこが惜しい） 3 回目の 4 組で、所感の元になった所です。 3 回目の PC 幅から切り抜いた所 差が一番出たのは、この LP で何をさせるか 一番の決め手は、見た目より、導線の解釈でした。 ブリーフでは、買うのはオンラインストアで、この LP はエントリーしてもらうためのページです。 この LP にはカートが無いので、エントリーしたあとは、商品ページや別の EC サイトで買う体験になるはずです。 ここで数量を入力させても、買えません。 あとから 18 枚を数えると、LP の中で数量を選ばせる UI（＋／− のボタンや数の入力）を作った回は、次のとおりでした。 組 数量を選ぶ UI を作った回 UI UX Pro Max 0 / 3 スキルなし 2 / 3 frontend-design 2 / 3 Hallmark 2 / 3 taste-skill 3 / 3 Impeccable 3 / 3 UI UX Pro Max だけが、3 回とも商品を見せるだけにとどめました。 ほかの組は、数を選ぶと合計と特典の段が分かる、目安の計算を作り込んでいます。 1 回目の対象商品の節。左が UI UX Pro Max、右が Impeccable 作り込み自体は丁寧で、いくら買えば特典が上がるかの目安が分かるのは、親切とも言えます。 それでも私は、このページで数量を入れさせるのは、ここで買えるかのように見えてしまうと感じました。 作り込みを促すスキル（taste-skill・Impeccable）ほど、3 回ともこの機能を足していました。 ただし、スキルなしも 3 回のうち 2 回は数量の UI を作っています。 数量の UI で説明できるのは UI UX Pro Max が一番だった理由までで、スキルなしが良かった理由ではありません。 そちらは、次の節で考えます。 スキルなしが案外良かった理由（私の考え） ここからは、試した結果からの私の考えです。 大胆さを求めるスキルほど、外れた 下のほうに見えた 4 つのスキルは、どれも「ありきたりを避けて、大胆に」と強く求める作りでした。 make deliberate, opinionated choices about palette, typography, and layout that are specific to this brief, and take aesthetic risk if justified. 訳: このブリーフに合わせて、配色・書体・レイアウトを意図して選び、主張を持たせる。理由があれば美的なリスクを取る。 frontend-design の SKILL.md の一節です。 This skill gives you the tools and permission to make design that earns the name out-of-distribution craft. 訳: このスキルは、分布の外の作り込みと呼べるデザインを作るための道具と許しを与える。 Impeccable の SKILL.md の一節で、LP のような「説得する」ページには、全力で大胆にいくよう書いています。 taste-skill は「anti-slop（AI っぽさを消す）」を名乗り、Hallmark は「生成されたものではなく、デザインされたものに見える」ことを目指しています。 どれも「このブリーフに合わせて」「理由があれば」と条件は付けています。 「AI っぽさを避ける」と「派手にする」も、本来は同じではありません。 それでも出てきた画面は、ありきたりを避けようとして、色や見出しを強くする方向に振れていました。 一方の UI UX Pro Max は、79 のスタイル・192 の配色・74 の書体の組み合わせを、データから検索して選ぶ作りです。 今回も 3 回とも、同梱の検索のスクリプトを 4〜5 回呼んでから組んでいました。 大胆さよりも、その業種で定番の型を引いてくる作りです。 1 人が見比べた結果からの仮説です 下のほうに多かったのは、ビビッドな色の対比、大きすぎる見出しや使い方の分からない余白、そして LP では使えない数量の入力でした。 「ありきたりを避けよう」とした結果が、派手な装飾と、頼んでいない機能になって出たように見えます。 この題材には、海外のギャラリーの尖り方が合わなかった taste-skill は、One Page Love や Awwwards で選ばれたサイトの研究から作ったと書いています。 私の印象では、こうしたギャラリーで目立つのは、尖ったポートフォリオや SaaS のサイトです。 日本の生活者向けの EC の LP では、情報の強弱と、落ち着いた世界観のほうが大事だと私は思います。 5 つとも海外の作者のスキルですが、今回の題材で私の感覚に合ったのは、派手さを求めない UI UX Pro Max と、スキルなしの 2 つでした。 逆に、英語で海外の SaaS っぽいページを作らせたら、Impeccable や Hallmark のほうが上手かったのかもしれません。 これはまだ試していません。 モデルが良くなると、スキルは薄いほうがいいのかもしれない スキルなしの Sonnet 5.5 は、ブリーフを読んで、波線の世界観もボタンの置き方も、それなりに組んでいました。 そこに「大胆に」「AI っぽさを消せ」と重ねると、良くなるよりも、外れることのほうが多かった印象です。 以前、自分の Claude Code のスキルを 4 分の 1 の長さまで削ったら、精度はむしろ上がったことがあります。 モデルが良くなると、細かい指示を重ねるより、削ったほうが良い結果になる場面があります。 zenn.dev 今回も、同じことが起きていたのかもしれません。 ただ、モデルの新旧や、同じスキルの長さ違いは比べていないので、確かめたわけではありません。 工程の多いスキルほど時間もかかり、スキルなしの 1.5〜2 倍かかった組もありました。 組ごとの時間と、費用の目安（3 回の値） 組 時間（分） 費用の目安（$） スキルなし 11 / 12 / 11 1.35 / 1.58 / 1.38 frontend-design 13 / 12 / 12 1.66 / 1.47 / 1.50 UI UX Pro Max 14 / 10 / 13 1.77 / 1.38 / 1.85 taste-skill 15 / 15 / 22 1.90 / 2.09 / 3.11 Impeccable 26 / 15 / 15 3.36 / 2.13 / 2.00 Hallmark 24 / 27 / 19 2.23 / 3.76 / 2.79 費用の目安は、Claude Code が出す API の換算額です。サブスクで回したので、実際には払っていません。 比べ方の限界 題材は 1 つ（日本語のキャンペーン LP）だけです。ほかの業種や英語のページでは、順位が変わるかもしれません 見比べたのは私 1 人で、3 回ずつです 2・3 回目は、1 回目で UI UX Pro Max がどれか分かったあとに見ています。見た目で当たりが付いた可能性があります ブラウザで画面を見て直す手順を止めたので、それを強みにしているスキル（taste-skill・Hallmark・Impeccable）には不利な条件です モデルは Sonnet 5.5 だけです まとめ: UI のスキルは、入れる前にスキルなしと比べる 人気の UI スキル 5 つとスキルなしを、同じ条件で 3 回ずつ比べた 一番は 3 回とも UI UX Pro Max で、2・3 回目の次はスキルなしだった。taste-skill や Hallmark は、期待していたほどではなかった 一番差が出たのは、見た目より、この LP で何をさせるかの解釈だった。数量を選ばせる UI を足さなかったのは UI UX Pro Max だけ 大胆さを求めるスキルほど、日本語の EC の LP からは外れた。あまりプロンプティングしすぎないほうがいい、というのが今回の私の結論 UI のスキルを入れる前に、まずスキルなしで同じものを作らせて、比べてみるのがおすすめです。 次は、英語で海外の SaaS っぽいページを題材にして、順位が入れ替わるかを試してみたいです。 Trellis のこと Trellis は、福岡でホームページの制作と、AI による業務の自動化をしている会社です。 記事は Zenn と、Trellis のサイトのブログの両方に載せています。 trellis-grow.com

Your AI coding agent doesn't have to guess at UI design. UI/UX Pro Max gives it a searchable library: 192 color palettes, 74 font pairings, 119 UX guidelines, 22 tech stacks. Works with Claude Code, Cursor and Codex. 144k GitHub stars. nextlevelbuilder/ui-ux-pro-max-skill t.co

یه اسکیل هوش مصنوعی با ۱۴۳ هزار ستاره، که دیزاین سیستم رو خودش می‌سازه ✨ با ۷۹ سبک، ۱۹۲ پالت رنگ و قانون‌های مخصوص هر صنعت، برای ری‌اکت و نکست و شادکن خروجی تمیز می‌ده. سیوش کن و لینکش رو از اینجا بردار: nextlevelbuilder/ui-ux-pro-max-skill

6- UI UX Pro Max: SaaS, Mikro SaaS, B2B Hizmeti, Geliştirici Aracı / IDE, Yapay Zeka/Sohbet Botu Platformu, Siber Güvenlik Platformudur. nextlevelbuilder/ui-ux-pro-max-skill t.co

Probé 5 Repositorios que le Dan NUEVAS Capacidades a Claude Code (Superpowers y Más) Instala los 5 repositorios del vídeo con la guía paso a paso, los prompts de las pruebas y otros repositorios que no han entrado en el top 5, gratis 👉 skool.com 🌟 The AI Blueprint Plus Aprende desde cero a construir un negocio alrededor de la IA, desde crear soluciones con las mejores herramientas y agentes hasta conseguir clientes, vender y escalar 👉 skool.com 🚨 Directo Gratis Cada Martes Cada martes a las 19:00 (hora de España) construimos un sistema en directo. Únete al grupo de WhatsApp para recibir el aviso 👉 chat.whatsapp.com 🏆 Resumen En este vídeo te enseño 5 repositorios de GitHub que le dan a Claude Code capacidades nuevas y cómo instalar cada uno dejando que el propio agente lea la documentación y lo configure. Veremos Superpowers, Google Workspace CLI, Agent Reach, UI UX Pro Max y HyperFrames, y los pondremos a prueba, desde construir una app y trabajar con Drive y Gmail hasta editar un Short. Además te cuento cuál instalaría primero según para qué uses Claude Code y por qué no conviene instalar 20 repositorios a la vez, sino empezar por uno o dos y probarlos en proyectos reales. 🔗 Los 5 Repositorios Superpowers 👉 obra/superpowers Google Workspace CLI 👉 googleworkspace/cli Agent Reach 👉 Panniantong/Agent-Reach UI UX Pro Max 👉 nextlevelbuilder/ui-ux-pro-max-skill HyperFrames 👉 heygen-com/hyperframes 🚀 AI Agency Accelerator Construye tu Consultora de IA con mucho más acompañamiento, trabajando con nosotros de forma cercana para ejecutar, resolver bloqueos y avanzar mucho más rápido. Te lo explico en una clase gratuita 👉 youtu.be 🌐 Contacto WhatsApp: wa.me Instagram: instagram.com LinkedIn: linkedin.com TikTok: tiktok.com Email: pauberenguer@northscale.es 🏢 NorthScale Implementa IA, automatizaciones y sistemas a medida en tu empresa para ahorrar tiempo, mejorar procesos y escalar operaciones 👉 northscale.es ⏱️ Capítulos 00:00 | Introducción 00:38 | Cómo He Elegido los 5 Repositorios 01:38 | Superpowers: un Proceso de Desarrollo para Claude Code 02:18 | Instalar Superpowers con Claude Code 03:01 | La Prueba: una App para Gestionar Clientes 04:17 | Primero Pregunta y Después Propone Bocetos 06:04 | El Plan por Tareas y la Construcción 08:41 | Google Workspace CLI: Claude Code con tus Apps de Google 09:24 | Instalarlo y Configurar Google Cloud en Automático 11:59 | La Prueba: Drive, Docs, Sheets, Calendar y Gmail 13:27 | El Resultado en las Apps de Google 15:05 | Agent Reach: Investigar en YouTube, Reddit, X y GitHub 15:57 | Instalar Agent Reach y Qué Funciona de Serie 17:36 | La Prueba: Qué Herramientas de Claude Code Interesan Más 18:13 | El Resultado de la Investigación 19:47 | UI UX Pro Max: Diseños sin Aspecto de IA 20:28 | Instalar UI UX Pro Max 21:22 | La Prueba: un Dashboard Comercial 22:17 | El Resultado: el Dashboard Pulse 23:39 | HyperFrames: Vídeos con Código desde Claude Code 24:17 | Instalar HyperFrames 25:05 | La Prueba: Editar un Short 26:03 | El Resultado: Antes y Después 27:35 | Cuál Instalaría Primero 28:29 | No Instales 20 Repositorios a la Vez 29:08 | Reflexión 30:17 | Despedida Si este contenido te ayuda, DALE LIKE, SUSCRÍBETE y activa la 🔔 para no perderte los próximos tutoriales, directos y pruebas de IA. #ClaudeCode #GitHub #Superpowers #GoogleWorkspace #AgentReach #UIUXProMax #HyperFrames #AgentesIA #InteligenciaArtificial #IA [ar] جربت 5 مستودعات تمنح Claude Code قدرات جديدة (قوى خارقة والمزيد) قم بتثبيت المستودعات الخمسة المذكورة في الفيديو باستخدام الدليل المفصل، واختبارات المحاكاة، بالإضافة إلى مستودعات أخرى لم تكن ضمن أفضل خمسة، مجانًا 👉 skool.com 🌟 دليل الذكاء الاصطناعي بلس تعلم من الصفر كيفية بناء مشروع تجاري قائم على الذكاء الاصطناعي، بدءًا من ابتكار حلول باستخدام أفضل الأدوات والوكلاء، وصولًا إلى اكتساب العملاء، والبيع، والتوسع 👉 skool.com 🚨 بث مباشر مجاني كل ثلاثاء كل ثلاثاء الساعة 7:00 مساءً (بتوقيت إسبانيا)، نقوم ببناء نظام على الهواء مباشرة. انضم إلى مجموعة واتساب لتلقي الإشعارات 👉 chat.whatsapp.com 🏆 ملخص في هذا الفيديو، سأعرض لكم 5 مستودعات GitHub تُضيف إمكانيات جديدة إلى Claude Code، وسأشرح كيفية تثبيت كل منها، مع السماح للوكيل بقراءة التوثيق وتكوينه تلقائيًا. سنتناول Superpowers وGoogle Workspace CLI وAgent Reach وUI UX Pro Max وHyperFrames، وسنختبرها عمليًا، بدءًا من إنشاء تطبيق والعمل مع Drive وGmail وصولًا إلى تعديل اختصار. سأخبركم أيضًا أيها أنصح بتثبيته أولًا بناءً على كيفية استخدامكم لـ Claude Code، ولماذا لا يُنصح بتثبيت 20 مستودعًا دفعة واحدة، بل يُفضل البدء بمستودع أو اثنين وتجربتهما في مشاريع حقيقية. 🔗 المستودعات الخمسة Superpowers 👉 obra/superpowers Google Workspace CLI 👉 googleworkspace/cli Agent Reach 👉 Panniantong/Agent-Reach UI UX Pro Max 👉 nextlevelbuilder/ui-ux-pro-max-skill HyperFrames 👉 heygen-com/hyperframes 🚀 مُسرِّع وكالات الذكاء الاصطناعي أسس شركتك الاستشارية في مجال الذكاء الاصطناعي بدعمٍ أكبر، واعمل معنا عن كثب لتنفيذ مشاريعك، وتذليل العقبات، والتقدم بسرعةٍ أكبر. سأشرح ذلك في درس مجاني 👉 youtu.be 🌐 للتواصل واتساب: wa.me إنستغرام: instagram.com لينكد إن: linkedin.com تيك توك: tiktok.com البريد الإلكتروني: pauberenguer@northscale.es 🏢 نورث سكيل طبّق الذكاء الاصطناعي والأتمتة والأنظمة المخصصة في شركتك لتوفير الوقت وتحسين العمليات وتوسيع نطاقها 👉 northscale.es ⏱️ الفصول 00:00 | مقدمة 00:38 | كيف اخترتُ المستودعات الخمسة 01:38 | القدرات الخارقة: عملية تطوير Claude Code 02:18 | تثبيت القدرات الخارقة مع Claude Code 03:01 | الاختبار: تطبيق لإدارة العملاء 04:17 | اسأل أولاً، ثم اقترح الرسومات التخطيطية 06:04 | التخطيط والبناء القائم على المهام 08:41 | واجهة سطر أوامر Google Workspace: Claude Code مع تطبيقات Google الخاصة بك 09:24 | تثبيت وتكوين Google Cloud تلقائيًا 11:59 | الاختبار: Drive وDocs وSheets وCalendar وGmail 13:27 | النتيجة في تطبيقات Google 15:05 | الوصول إلى الوكلاء: البحث على YouTube وReddit وX وGitHub 15:57 | تثبيت Agent Reach وما يعمل مباشرةً بعد التثبيت 17:36 | الاختبار: ما هي أدوات Claude Code الأكثر إثارة للاهتمام؟ 18:13 | نتائج البحث 19:47 | UI UX Pro Max: تصاميم بدون مظهر الذكاء الاصطناعي 20:28 | تثبيت UI UX Pro Max 21:22 | الاختبار: لوحة تحكم تجارية 22:17 | النتيجة: لوحة تحكم Pulse 23:39 | HyperFrames: فيديوهات تحتوي على أكواد من Claude Code 24:17 | تثبيت HyperFrames 25:05 | الاختبار: تعديل اختصار 26:03 | النتيجة: قبل وبعد 27:35 | أيها ستثبت أولاً؟ 28:29 | لا تقم بتثبيت 20 مستودعًا دفعة واحدة 29:08 | تأملات 30:17 | ختامًا إذا أفادك هذا المحتوى، اضغط على زر الإعجاب، واشترك في القناة، وفعل جرس التنبيهات 🔔 لتصلك إشعارات الدروس التعليمية والبث المباشر واختبارات الذكاء الاصطناعي القادمة. #ClaudeCode #GitHub #Superpowers #GoogleWorkspace #AgentReach #UIUXProMax #HyperFrames #IAAgents #ArtificialIntelligence #AI [en-US] I Tried 5 Repositories That Give Claude Code NEW Capabilities (Superpowers and More) Install the 5 repositories from the video with the step-by-step guide, test prompts, and other repositories that didn't make the top 5, for free 👉 skool.com 🌟 The AI ​​Blueprint Plus Learn from scratch how to build a business around AI, from creating solutions with the best tools and agents to acquiring clients, selling, and scaling 👉 skool.com 🚨 Free Live Stream Every Tuesday Every Tuesday at 7:00 PM (Spanish time) we build a system live. Join the WhatsApp group to receive notifications 👉 chat.whatsapp.com 🏆 Summary In this video, I'll show you 5 GitHub repositories that give Claude Code new capabilities and how to install each one, letting the agent itself read the documentation and configure it. We'll look at Superpowers, Google Workspace CLI, Agent Reach, UI UX Pro Max, and HyperFrames, and we'll put them to the test, from building an app and working with Drive and Gmail to editing a Shortcut. I'll also tell you which one I would install first depending on how you use Claude Code and why it's not a good idea to install 20 repositories at once, but rather to start with one or two and test them in real projects. 🔗 The 5 Repositories Superpowers 👉 obra/superpowers Google Workspace CLI 👉 googleworkspace/cli Agent Reach 👉 Panniantong/Agent-Reach UI UX Pro Max 👉 nextlevelbuilder/ui-ux-pro-max-skill HyperFrames 👉 heygen-com/hyperframes 🚀 AI Agency Accelerator Build your AI consultancy with much more support, working closely with us to execute, resolve roadblocks, and move much faster. I'll explain it in a free class 👉 youtu.be 🌐 Contact WhatsApp: wa.me Instagram: instagram.com LinkedIn: linkedin.com TikTok: tiktok.com Email: pauberenguer@northscale.es 🏢 NorthScale Implement AI, automation, and custom systems in your company to save time, improve processes, and scale operations 👉 northscale.es ⏱️ Chapters 00:00 | Introduction 00:38 | How I Chose the 5 Repositories 01:38 | Superpowers: A Development Process for Claude Code 02:18 | Installing Superpowers with Claude Code 03:01 | The Test: An App for Managing Clients 04:17 | Ask First, Then Propose Sketches 06:04 | The Task-Based Plan and Build 08:41 | Google Workspace CLI: Claude Code with Your Google Apps 09:24 | Installing and Configuring Google Cloud Automatically 11:59 | The Test: Drive, Docs, Sheets, Calendar, and Gmail 13:27 | The Result in Google Apps 15:05 | Agent Reach: Researching on YouTube, Reddit, X, and GitHub 15:57 | Installing Agent Reach and What Works Out of the Box 17:36 | The Test: Which Claude Code Tools Are Most Interesting 18:13 | The Research Results 19:47 | UI UX Pro Max: Designs Without an AI Look 20:28 | Installing UI UX Pro Max 21:22 | The Test: A Commercial Dashboard 22:17 | The Result: The Pulse Dashboard 23:39 | HyperFrames: Videos with Code from Claude Code 24:17 | Installing HyperFrames 25:05 | The Test: Editing a Shortcut 26:03 | The Result: Before and After 27:35 | Which Would You Install First? 28:29 | Don't Install 20 Repositories at Once 29:08 | Reflection 30:17 | Closing If this content helps you, LIKE, SUBSCRIBE, and turn on notifications 🔔 so you don't miss the next tutorials, live streams, and AI tests. #ClaudeCode #GitHub #Superpowers #GoogleWorkspace #AgentReach #UIUXProMax #HyperFrames #IAAgents #ArtificialIntelligence #AI [pt-BR] Testei 5 Repositórios que dão NOVAS Capacidades ao Claude Code (Superpoderes e Mais) Instale gratuitamente os 5 repositórios do vídeo com o guia passo a passo, prompts de teste e outros repositórios que não entraram no top 5 👉 skool.com 🌟 The AI ​​Blueprint Plus Aprenda do zero como construir um negócio em torno de IA, desde a criação de soluções com as melhores ferramentas e agentes até a aquisição de clientes, vendas e escalonamento 👉 skool.com 🚨 Transmissão ao vivo gratuita todas as terças-feiras Todas as terças-feiras, às 19h (horário da Espanha), construímos um sistema ao vivo. Participe do grupo do WhatsApp para receber notificações 👉 chat.whatsapp.com 🏆 Resumo Neste vídeo, mostrarei 5 repositórios do GitHub que adicionam novas funcionalidades ao Claude Code e como instalar cada um deles, permitindo que o próprio agente leia a documentação e os configure. Vamos analisar o Superpowers, o Google Workspace CLI, o Agent Reach, o UI UX Pro Max e o HyperFrames, e colocá-los à prova, desde a criação de um aplicativo e a integração com o Drive e o Gmail até a edição de um Atalho. Também explicarei qual eu instalaria primeiro, dependendo de como você usa o Claude Code, e por que não é uma boa ideia instalar 20 repositórios de uma vez, mas sim começar com um ou dois e testá-los em projetos reais. 🔗 Os 5 Repositórios Superpowers 👉 obra/superpowers Google Workspace CLI 👉 googleworkspace/cli Agent Reach 👉 Panniantong/Agent-Reach UI UX Pro Max 👉 nextlevelbuilder/ui-ux-pro-max-skill HyperFrames 👉 heygen-com/hyperframes 🚀 Aceleradora de Agências de IA Construa sua consultoria de IA com muito mais suporte, trabalhando em estreita colaboração conosco para executar, resolver obstáculos e avançar muito mais rápido. Explicarei tudo em uma aula gratuita 👉 youtu.be 🌐 Contato WhatsApp: wa.me Instagram: instagram.com LinkedIn: linkedin.com TikTok: tiktok.com Email: pauberenguer@northscale.es 🏢 NorthScale Implemente IA, automação e sistemas personalizados em sua empresa para economizar tempo, aprimorar processos e escalar operações 👉 northscale.es ⏱️ Capítulos 00:00 | Introdução 00:38 | Como escolhi os 5 repositórios 01:38 | Superpoderes: Um processo de desenvolvimento para o Claude Code 02:18 | Instalando Superpoderes com o Claude Code 03:01 | O teste: Um aplicativo para gerenciar clientes 04:17 | Pergunte primeiro, depois proponha esboços 06:04 | O planejamento e a construção baseados em tarefas 08:41 | CLI do Google Workspace: Claude Code com seus aplicativos do Google 09:24 | Instalando e configurando o Google Cloud automaticamente 11:59 | O teste: Drive, Documentos, Planilhas, Agenda e Gmail 13:27 | O resultado nos aplicativos do Google 15:05 | Agent Reach: Pesquisando no YouTube, Reddit, X e GitHub 15:57 | Instalando o Agent Reach e o que funciona imediatamente 17:36 | O teste: Quais ferramentas do Claude Code são mais interessantes 18:13 | Resultados da Pesquisa 19:47 | UI UX Pro Max: Designs sem IA 20:28 | Instalando o UI UX Pro Max 21:22 | O Teste: Um Painel Comercial 22:17 | O Resultado: O Painel Pulse 23:39 | HyperFrames: Vídeos com Código do Claude Code 24:17 | Instalando o HyperFrames 25:05 | O Teste: Editando um Atalho 26:03 | O Resultado: Antes e Depois 27:35 | Qual Você Instalaria Primeiro? 28:29 | Não Instale 20 Repositórios de Uma Vez 29:08 | Reflexão 30:17 | Encerramento Se este conteúdo te ajudou, CURTA, INSCREVA-SE e ative as notificações 🔔 para não perder os próximos tutoriais, transmissões ao vivo e testes de IA. #ClaudeCode #GitHub #Superpoderes #GoogleWorkspace #AgentReach #UIUXProMax #HyperFrames #IAAgents #InteligênciaArtificial #IA

Don't build from scratch: 10 GitHub repos to use instead #coding #programming #developer Claude use karte ho? Ye 10 GitHub repos tumhare kaam aa sakte hain! 🤯 Ek short mein 10 useful repos: reverse engineering, coding, design, writing, research, scraping aur diagrams. 🔗 REPO LINKS 01 REA: morluto/rea 02 Ponytail: DietrichGebert/ponytail 03 Hallmark: Nutlope/hallmark 04 Humanizer: blader/humanizer 05 Onyx: onyx-dot-app/onyx 06 Impeccable: pbakaus/impeccable 07 UI/UX Pro Max: nextlevelbuilder/ui-ux-pro-max-skill 08 Last 30 Days: mvanhorn/last30days-skill 09 Scrapling: D4Vinci/Scrapling 10 Diagram Design: cathrynlavery/diagram-design ⚠️ Note: Ye alag-alag type ke tools hain (skills, framework, platform). Sabka install alag hota hai, isliye har repo ka README zaroor padho. REA sirf legal aur authorized use ke liye hai. 💬 Comment karo "REPOS" aur batao kaunsa repo sabse pehle try karoge! 👍 Like, Save aur Share karo apne tech friend ke saath. 🔔 TechyMers ko follow/subscribe karo more useful tech tips ke liye. #shorts #claude #github #aitools #TechyMers #claudeai #opensource #coding #techtips #hinglish #reality #ponytail #hallmark #ai agents #productivity #webscraping #uidesign

개발자들이 선택한 깃허브 디자인·모션 도구 TOP 14 웹사이트 UI 디자인부터 인터랙션, 모션그래픽, 3D 애니메이션까지. 깃허브에서 인기 있고 실제로 쓸 만한 AI 디자인 스킬과 도구 14개를 네 챕터로 정리했습니다. 필요한 챕터만 골라 보세요. 00:00 인트로 00:19 CH1 AI 디자인 스킬 00:19 프론트엔드 디자인 (Anthropic) 00:45 UI UX 프로 맥스 01:11 테이스트 스킬 01:33 홀마크 01:57 임페커블 02:28 CH2 작업공간 02:31 구글 스티치 02:55 오픈디자인 03:19 CH3 웹 인터랙션 03:22 에밀 코왈스키 애니메이션 스킬 03:49 리액트 비츠 04:09 키프레임 갤러리 04:23 CH4 모션그래픽 04:27 리모션 04:44 하이퍼프레임즈 05:06 클로드 모션 05:32 어썸 오푸스 5.5 비디오스 05:51 마무리 ▶ 영상 속 도구 링크 [CH1 AI 디자인 스킬] 프론트엔드 디자인: github.com/anthropics/skills/tree/main/skills/fro… UI UX 프로 맥스: nextlevelbuilder/ui-ux-pro-max-skill 테이스트 스킬: Leonxlnx/taste-skill 홀마크: Nutlope/hallmark 임페커블: pbakaus/impeccable (impeccable.style) [CH2 작업공간] 구글 스티치: stitch.withgoogle.com 오픈디자인: nexu-io/open-design [CH3 웹 인터랙션] 에밀 코왈스키 스킬: emilkowalski/skills 리액트 비츠: reactbits.dev (DavidHDev/react-bits) 키프레임 갤러리: keyframe.gallery [CH4 모션그래픽] 리모션: remotion.dev (remotion-dev/remotion) 하이퍼프레임즈: heygen-com/hyperframes 클로드 모션: claude.com 어썸 오푸스 5.5 비디오스: yihui-dev/awesome-opus5-5-videos [en-US] TOP 14 GitHub Design & Motion Tools Chosen by Developers From website UI design to interactions, motion graphics, and 3D animation. We have organized 14 popular and practically useful AI design skills and tools from GitHub into four chapters. Pick only the chapters you need. 00:00 Intro 00:19 CH1 AI Design Skills 00:19 Frontend Design (Anthropic) 00:45 UI UX Pro Max 01:11 Taste Skills 01:33 Hallmark 01:57 Impeccable 02:28 CH2 Workspace 02:31 Google Stitch 02:55 OpenDesign 03:19 CH3 Web Interactions 03:22 Emil Kowalski Animation Skills 03:49 React Beats 04:09 Keyframe Gallery 04:23 CH4 Motion Graphics 04:27 Remotion 04:44 Hyperframes 05:06 Claude Motion 05:32 Awesome Opus 5.5 Videos 05:51 Wrap-up ▶ Links to tools in the video [CH1 AI Design Skills] Frontend Design: github.com/anthropics/skills/tree/main/skills/fro… UI UX Pro Max: nextlevelbuilder/ui-ux-pro-max-skill Taste Skills: Leonxlnx/taste-skill Hallmark: Nutlope/hallmark Impeccable: pbakaus/impeccable (impeccable.style) [CH2 Workspace] Google Stitch: stitch.withgoogle.com Open Design: nexu-io/open-design [CH3 Web Interactions] Emil Kowalski Skills: emilkowalski/skills React Bits: reactbits.dev (DavidHDev/react-bits) Keyframes Gallery: keyframe.gallery [CH4 Motion Graphics] Remotion: remotion.dev (remotion-dev/remotion) Hyperframes: heygen-com/hyperframes Claude Motion: claude.com Awesome Opus 5.5 Videos: yihui-dev/awesome-opus5-5-videos [id] 14 Alat Desain & Motion GitHub Pilihan Para Developer Mulai dari desain UI situs web hingga interaksi, grafis gerak, dan animasi 3D. Kami telah mengorganisir 14 keterampilan dan alat desain AI yang populer dan praktis dari GitHub ke dalam empat bab. Pilih hanya bab yang Anda butuhkan. 00:00 Pendahuluan 00:19 CH1 Keterampilan Desain AI 00:19 Desain Frontend (Anthropic) 00:45 UI UX Pro Max 01:11 Taste Skills 01:33 Hallmark 01:57 Impeccable 02:28 CH2 Workspace 02:31 Google Stitch 02:55 OpenDesign 03:19 CH3 Interaksi Web 03:22 Keterampilan Animasi Emil Kowalski 03:49 React Beats 04:09 Galeri Keyframe 04:23 CH4 Grafis Gerak 04:27 Remotion 04:44 Hyperframes 05:06 Claude Motion 05:32 Video Awesome Opus 5.5 05:51 Penutup ▶ Tautan ke alat dalam video [CH1 Keterampilan Desain AI] Desain Frontend: github.com/anthropics/skills/tree/main/skills/fro… UI UX Pro Max: nextlevelbuilder/ui-ux-pro-max-skill Taste Skills: Leonxlnx/taste-skill Hallmark: Nutlope/hallmark Impeccable: pbakaus/impeccable (impeccable.style) [Ruang Kerja Bab 2] Google Stitch: stitch.withgoogle.com Open Design: nexu-io/open-design [Interaksi Web Bab 3] Emil Kowalski Skills: emilkowalski/skills React Bits: reactbits.dev (DavidHDev/react-bits) Galeri Keyframes: keyframe.gallery [Grafik Gerak CH4] Remotion: remotion.dev (remotion-dev/remotion) Hyperframes: heygen-com/hyperframes Claude Motion: claude.com Video Awesome Opus 5.5: yihui-dev/awesome-opus5-5-videos

@Chosen4real_ Y'a littéralement le skill en question sur ce repo nextlevelbuilder/ui-ux-pro-max-skill

This GitHub Repo Fixes Your AI's Purple Gradient Problem 🎨 | Day 4 If your vibe-coded website has the same purple gradient as everyone else's, this repo fixes that. 🔗 Repo: nextlevelbuilder/ui-ux-pro-max-skill UI UX Pro Max is an open-source skill that gives your AI a design brain. Before it writes any code, it builds a full design system: style, colors, fonts, and even a list of things to avoid (including "AI purple/pink gradients"). 📊 192 color palettes · 74 font pairings · 119 UX rules 🤖 Works in Claude Code, Cursor, Codex, Windsurf, Gemini CLI, GitHub Copilot and more ⚡ Activates on its own when you ask for UI work, like "build a landing page for my SaaS" Install: npm install -g ui-ux-pro-max-cli uipro init --ai claude (or cursor, codex, windsurf, all…) This is Day 4 of finding repositories you should know about. Subscribe so you don't miss Day 5 🔔 Instagram: @princegupta.ai X: @_princegupta13 #shorts #vibecoding #claudecode #uiux #github

깃허브에서 제일 핫한 클로드 스킬 TOP 5 📎 설치 명령어까지 정리한 무료 가이드 tuemarz.notion.site 요즘 깃허브에서 제일 인기 많은 클로드 스킬 5개 정리했어요. 링크는 아래에 다 있어요. 1. Superpowers: 기획부터 테스트, 리뷰까지 개발 순서를 잡아줘요 obra/superpowers 2. Anthropic Skills: 앤트로픽 공식 스킬, 워드·엑셀 같은 문서를 바로 만들어요 anthropics/skills 3. UI UX Pro Max: 디자인 데이터를 넣어서 화면 완성도를 올려줘요 nextlevelbuilder/ui-ux-pro-max-skill 4. Caveman: 원시인처럼 짧게 말하게 해서 토큰을 아껴줘요 JuliusBrussee/caveman 5. Taste Skill: AI 티 안 나는 디자인을 만들어줘요 tasteskill.dev 🎙️ HOW I AI 출연 기업 모집 우리 회사가 AI로 일하는 방식을 인터뷰로 남깁니다. 촬영부터 편집, 업로드까지 저희가 맡습니다. 지금까지 48편, 누적 169만 회. 토스, 크래프톤, 노션과 함께했습니다. 👉 howiai.tv 🗞️ 조쉬의 뉴스레터 (구독자 1만 명 이상) AI 인사이트를 가장 먼저 받아보실 수 있습니다. 👉 maily.so 🚀 ASC 연간 멤버십 모집 '실행' 중심으로 1년을 함께하는 멤버십 프로그램입니다. 👉 solopreneur.co.kr 🔗 소셜 미디어 (합계 3만 명 이상) - Threads: threads.com - LinkedIn: linkedin.com [en-US] Top 5 Hottest Claude Skills on GitHub 📎 A free guide that even includes installation commands tuemarz.notion.site I’ve compiled the top 5 most popular Claude skills on GitHub these days. All the links are below. 1. Superpowers: Sets the development sequence from planning to testing and review obra/superpowers 2. Anthropic Skills: Official Anthropic skills that instantly create documents like Word and Excel anthropics/skills 3. UI UX Pro Max: Improves screen quality by incorporating design data nextlevelbuilder/ui-ux-pro-max-skill 4. Caveman: Saves tokens by making you speak briefly like a caveman JuliusBrussee/caveman 5. Taste Skill: Creates designs that don't look like AI tasteskill.dev 🎙️ Recruiting Companies for HOW I AI We document how your company works with AI through interviews. We handle everything from filming to editing and uploading. 48 episodes so far, 1.69 million cumulative views. We have partnered with Toss, Krafton, and Notion. 👉 howiai.tv 🗞️ Josh's Newsletter (Over 10,000 subscribers) Be the first to receive AI insights. 👉 maily.so 🚀 ASC Annual Membership Recruitment A membership program focused on 'execution' that you will spend a year with. 👉 solopreneur.co.kr 🔗 Social Media (Total over 30,000 followers) - Threads: threads.com - LinkedIn: linkedin.com