quick context on the problem 🙏 i have a loop setup with claude code and codex: it builds something, takes a screenshot on it's own, compares it to the figma reference, keeps iterating until it's pixel perfect. but it never works the agent would screenshot its own output and somehow not see a completely broken button. i'm sitting there staring at it! but under isay "the button is broken" it wouldn't see it. i was like how are you so smart and dumb at the same time? that's when it clicked for me. the problem isn't that the model is dumb. the problem is that when you send a screenshot, the AI just... looks at it and describes the image in general sense. so you spend 3-5 rounds saying "no, the padding is wrong." "no, look at the nav again." "no, the border radius doesn't match." i started digging into how this is actually solved at companies that do it well. turns out replit, lovable, microsoft, all of them solved this already. they all run structured analysis first. spatial coordinates, component hierarchies, design tokens. then the model gets that as context. but this intelligence is locked inside their platforms. if you're using claude code or codex or anything general purpose, you get none of it. so i built clearshot 📸 open source skill for claude code/codex. every time you or the agent takes a screenshot, it doesn't just "look" at it. it tells the model exactly what's there. padding values in pixels. not "blue color" but the actual hex code. not "some spacing" but 8px gap between the label and the input. border radius, font weight, shadow values. everything the model was guessing at before, it now knows. very deterministic but... there's also a qualitative path. a taste layer. does the hierarchy feel clear. is the visual weight distributed right. is there enough breathing room. does this feel like a premium product or a hackathon project. because sometimes the question isn't "what are the pixel values" but "does this feel right." clearshot handles both. one thing i was careful about: it shouldn't fire when it's not needed. if you send a screenshot of a chart, or a meme, or an architecture diagram, and you're not building frontend, the skill stays quiet. it only activates when the image is a UI and the conversation is about building or critiquing that UI. and within the analysis itself, there are exit paths at every step. if a quick spatial scan is enough, it stops there. your agent isn't burning tokens running a full 5-step pipeline when you just asked "does this look right." this is the first version. will keep iterating. clearshot is open source and free. star it if you think AI needs to get better at seeing your UI. research this builds on: - microsoft omniparser - dcgen - google screenai

270 DEGREES: China’s own ScreenX - uhh ScreenAI? SucksX? Does D tlaW Disney Dis know about this? Here’s a thread on what I’ll say is among the worst special-format screens I have ever seen. Note: This image is expanded using AI as a mockery of this entire format.

#OTTOCAST ScreenAI #ディスプレイオーディオ のBluetooth接続方法を初心者向けに詳細解説動画になります。 CarPlay / Android Auto がうまく接続できない、初期設定が不安という方でも 誰でも簡単に接続できる手順を今回動画で解説しました🙇‍♂️ youtu.be/bfxVhb8dIN8 #5万円で買った車

ScreenAI landing page✨ Going with a more enterprise look and feel. Let me know your thoughts.

タッチパネル使えなくなったのでOttocast ScreenAI付けた……給電の線増えたなぁ……うちの車は中がこんな感じで光ります #hagume

イラン系APT「MuddyWater」が、中東・北アフリカ諸国および国際機関を中心に100超の政府機関を標的とした大規模フィッシング作戦を展開していたことがGroup-IBの分析で判明した。攻撃にはNordVPN経由で侵害したメールボックスが利用され、バックドア型マルウェア「Phoenix v4」と独自の認証情報窃取ツールが配布された。 メールには「コンテンツを有効化」と誘導するWord文書が添付され、マクロを実行するとAES暗号化されたペイロードが展開される。最終段階でPhoenixが起動し、システム情報収集や永続化を実施。C2ドメイン「screenai[.]online」と通信し、ファイル転送やコマンド実行を行う。攻撃は2025年8月19〜24日の短期間に集中しており、極めて計画的だった。Chromeなど主要ブラウザの資格情報を盗む「Chromium_Stealer」も確認され、国家支援型の諜報活動である可能性が高いとされる。 gbhackers.com/muddywaters-ph…

Phoenix v4 establishes persistence via the Winlogon registry key and communicates with its C2 (screenai[.]online, hosted on 159[.]198[.]36[.]115). Indicators suggest that MuddyWater may be leveraging a new RMM tool, Action1, in conjunction with the known PDQ RMM and a custom infostealer within its latest campaign. #MalwareAnalysis

A recent campaign exploiting the Oman Ministry of Foreign Affairs has been identified by ClearSky. This lure referenced the Iran–Israel war and the Middle East's "day after" and was sent to multiple ministries of foreign affairs. Similar obfuscation techniques were used by Iranian threat actors in 2023 when they targeted Mojahedin-e-Khalq in Albania. We assess with moderate confidence that this activity is linked to the same Iranian threat actors. IoC's: Sha256: b3c3ce80453d69ffc9db05ab3105f891feff6cd8d92d4907a6ee2fb701d590dd b2c52fde1301a3624a9ceb995f2de4112d57fcbc6a4695799aec15af4fa0a122 05d8f686dcbb6078f91f49af779e4572ba1646a9c5629a1525e8499ab481dbf2 03828aebefde47bca0fcf0684ecae18aedde035c85f9d39edd2b7a147a1146fa 02ccc4271362b92a59e6851ac6d5d2c07182064a602906d7166fe2867cc662a5 76fa8dca768b64aefedd85f7d0a33c2693b94bdb55f40ced7830561e48e39c75 2c92c7bf2d6574f9240032ec6adee738edddc2ba8d3207eb102eddf4ab963db0 2c92c7bf2d6574f9240032ec6adee738edddc2ba8d3207eb102eddf4ab963db0 80e9105233f9d93df753a43291c2ab1a010375357db9327f9fe40d184f078c6b f0ba41ce46e566f83db1ba3fc762fd9b394d12a01a9cef4ac279135e4c1c67a9 3d6f69cc0330b302ddf4701bbc956b8fca683d1c1b3146768dcbce4a1a3932ca 1c16b271c0c4e277eb3d1a7795d4746ce80152f04827a4f3c5798aaf4d51f6a1 1883db6de22d98ed00f8719b11de5bf1d02fc206b89fedd6dd0df0e8d40c4c56 3ac8283916547c50501eed8e7c3a77f0ae8b009c7b72275be8726a5b6ae255e3 Network: screenai[.]online

Google ScreenAI: make your Chromebook melt down pivot-to-ai.com/2025/03/29/g… - text youtube.com/watch?v=FsL5ye55… - video also I have finally cracked mic technique and frankly the video sounds AWESOME, play on headphones for Pivot to ASMR

Sounds like @waitin4agi_ is hinting at advancements in AI tools for UI/UX and infographics. Recent breakthroughs include generative AI creating layouts, animations, and personalized designs, as well as tools like ScreenAI pushing the boundaries of visual language understanding for interfaces and infographics. These innovations are making design processes faster and more intuitive while enabling hyper-personalized user experiences. Exciting times ahead!

Kaip užpisa tweetų screenai, nes višta po mute sėdi 🤦

Microsoft's been working on LLM-driven windows agents for a while. Back in Feb they open sourced code for an agent mixing pywinauto (like puppeteer/Selenium but OS level) with GPT4-V. Google also published about their multi-modal ScreenAI at the same time

Google deepmind screenAI best case (left) v. my stuff at moondreams worst case (right)

Great post, loved the image dimension visualization! Curious if you had more thoughts on the stretching to square bit, trying to reconcile with this ablation in the ScreenAI paper.

UIを詳細にstylesheetに変換するPrompt Goalは添付された画像にしたがってUIをstylesheetとして作成します。 ’’’ 手順 What’s in this image? ''' 記法ルール 各種コンポーネントはこのような表記で表すこと 基準は(0,0)とする [comp_name(x,y,z,w,h:各種座標)] ''' 以下のようなプロンプトを使用すると、入力された画像から指示文や情報を抽出できます。 IMAGE あなたは今、UIのスクリーンショットを見ています。このスクリーンショットに表示されている様々な要素を分析し、説明してください。 具体的には以下の内容を含めてください: - 画面上に表示されているボタン、アイコン、テキスト、画像などのUI要素とその配置 - 各要素の機能や目的 (ボタンの役割、テキストの意味など) - 画面全体の構成と、ユーザーに対して意図されているアクションや情報 各要素は以下のフォーマットで表現してください: 要素タイプ 要素の座標と大きさ (要素の説明) 最後に、UI全体の目的を1、2文で要約してください。 上記のプロンプトを使用することで、ScreenAIは画像内のUIの要素と構成を詳細に理解し、それらの意味や機能を推論することができます。 座標情報も含めることで、各要素の位置関係も考慮に入れた分析が可能になります。 最後の要約部分では、UIの全体的な意図を端的に説明することを求めています。 このようなプロンプトを活用し、大量の画像とその分析結果を学習することで、ScreenAIはUI理解の精度を高めていきます。 同時に、画像とテキストの関連付けを通じて、言語理解能力も向上させているのだと思います。 ''' Output style： Ex. UIを構成する要素を一般化し、構造化するための表記ルールを以下のように定めます。 1. コンポーネント名 - コンポーネントの名称は、大文字で始まるキャメルケース（PascalCase）を使用する - 例: MessageBox, UserAvatar, ButtonGroup 2. プロパティ（Props） - プロパティ名は、小文字で始まるキャメルケース（camelCase）を使用する - プロパティの型は、コロン（:）の後に指定する - 必須のプロパティには、プロパティ名の後に感嘆符（!）を付ける - 例: userName: string, isOnline: boolean, onClick: function, message!: string 3. イベントハンドラ - イベントハンドラ名は、「on」で始まり、イベント名は大文字で始まるキャメルケースを使用する - 例: onClick, onHover, onKeyPress 4. 状態（State） - 状態名は、小文字で始まるキャメルケースを使用する - 状態の型は、プロパティと同様にコロンの後に指定する - 例: isOpen: boolean, selectedItem: string 5. スタイル - スタイルプロパティ名は、小文字で始まるキャメルケースを使用する - スタイル値は、シングルクォート（'）で囲む - 例: backgroundColor: '#f0f0f0', fontSize: '14px', padding: '8px 16px' 6. 子要素 - 子要素を表す場合は、インデントを使用して階層構造を表現する - 子要素の定義は、親要素の定義の下に置く - 例: ``` MessageBox: backgroundColor: '#f0f0f0' borderRadius: '8px' children: - UserAvatar: size: '32px' src: 'path/to/avatar.png' - MessageText: color: '#333' fontSize: '14px' ``` 7. コメントとドキュメンテーション - コンポーネントの説明や使用例は、コンポーネント定義の上に記載する - インラインコメントは、行の末尾に//を使用して記述する - 例: ``` // A reusable message box component // Usage: <MessageBox userName="John" message="Hello, world!" /> MessageBox: userName: string message!: string // Required prop onClose: function ``` これらの表記ルールに従うことで、UIコンポーネントの定義を統一し、可読性と保守性を向上させることができます。また、これらのルールは一般的なコンポーネント指向のフレームワークやライブラリと互換性があるため、実装時に活用しやすいでしょう。 ''' GPT: Output ：UI component 詳細 Ex. UIを構成する要素を一般化し、構造化するための表記ルールを以下のように定めます。 1. コンポーネント名 - コンポーネントの名称は、大文字で始まるキャメルケース（PascalCase）を使用する - 例: MessageBox, UserAvatar, ButtonGroup 2. プロパティ（Props） - プロパティ名は、小文字で始まるキャメルケース（camelCase）を使用する - プロパティの型は、コロン（:）の後に指定する - 必須のプロパティには、プロパティ名の後に感嘆符（!）を付ける - 例: userName: string, isOnline: boolean, onClick: function, message!: string 3. イベントハンドラ - イベントハンドラ名は、「on」で始まり、イベント名は大文字で始まるキャメルケースを使用する - 例: onClick, onHover, onKeyPress 4. 状態（State） - 状態名は、小文字で始まるキャメルケースを使用する - 状態の型は、プロパティと同様にコロンの後に指定する - 例: isOpen: boolean, selectedItem: string 5. スタイル - スタイルプロパティ名は、小文字で始まるキャメルケースを使用する - スタイル値は、シングルクォート（'）で囲む - 例: backgroundColor: '#f0f0f0', fontSize: '14px', padding: '8px 16px' 6. 子要素 - 子要素を表す場合は、インデントを使用して階層構造を表現する - 子要素の定義は、親要素の定義の下に置く - 例: ``` MessageBox: backgroundColor: '#f0f0f0' borderRadius: '8px' children: - UserAvatar: size: '32px' src: 'path/to/avatar.png' - MessageText: color: '#333' fontSize: '14px' ``` 7. コメントとドキュメンテーション - コンポーネントの説明や使用例は、コンポーネント定義の上に記載する - インラインコメントは、行の末尾に//を使用して記述する - 例: ``` // A reusable message box component // Usage: <MessageBox userName="John" message="Hello, world!" /> MessageBox: userName: string message!: string // Required prop onClose: function ``` これらの表記ルールに従うことで、UIコンポーネントの定義を統一し、可読性と保守性を向上させることができます。また、これらのルールは一般的なコンポーネント指向のフレームワークやライブラリと互換性があるため、実装時に活用しやすいでしょう。 ALL LANG:en ’’’ Create stylesheet Full Context ### UIテンプレート 以下は、UIを一般化したテンプレートです。各コンポーネントの名称、プロパティ、イベントハンドラ、状態、スタイル、子要素を含めて詳細に記述しています。 #### コンポーネント構成: 1. **Header** - **プロパティ** - `text: string` - 表示されるテキスト - `position: {x: number, y: number}` - `size: {width: number, height: number}` - **説明** - メインタイトルを表示します。 2. **SectionHeader** - **プロパティ** - `text: string` - セクションの見出しテキスト - `position: {x: number, y: number}` - `size: {width: number, height: number}` - **説明** - カテゴリの見出しを表示します。 3. **ToolName** - **プロパティ** - `text: string` - ツール名のテキスト - `position: {x: number, y: number}` - `size: {width: number, height: number}` - **説明** - カテゴリに対応するツールの名前を表示します。 4. **Icon** - **プロパティ** - `src: string` - アイコンの画像ソース - `position: {x: number, y: number}` - `size: {width: number, height: number}` - **説明** - ツールのビジュアルアイコンを表示します。 ### テンプレート構造: ``` UIテンプレート: Header: text: '30シーン別AIツール早見表' position: { x: 50, y: 30 } size: { width: 500, height: 50 } description: 'メインタイトルを表示します。' SectionHeader: - text: '文章生成' position: { x: 50, y: 100 } size: { width: 200, height: 40 } - text: '画像生成' position: { x: 50, y: 140 } size: { width: 200, height: 40 } ... description: 'カテゴリの見出しを表示します。' ToolName: - text: 'Notion AI' position: { x: 300, y: 100 } size: { width: 200, height: 40 } - text: 'Adobe Firefly' position: { x: 300, y: 140 } size: { width: 200, height: 40 } ... description: 'カテゴリに対応するツールの名前を表示します。' Icon: - src: 'path/to/notion_ai_icon.png' position: { x: 250, y: 100 } size: { width: 40, height: 40 } - src: 'path/to/adobe_firefly_icon.png' position: { x: 250, y: 140 } size: { width: 40, height: 40 } ... description: 'ツールのビジュアルアイコンを表示します。' ``` ### 説明: このテンプレートは、複数のAIツールをカテゴリ別にリストアップするUIを構築するための一般的な構造を示しています。各コンポーネントには表示テキスト、位置、大きさ、説明が含まれており、UIの各部分がどのような役割を果たすかが明確に分かります。 このテンプレートを使用することで、新しいAIツールのリストを簡単に作成し、視覚的に整理された形式でユーザーに提供することができます。 ‘’’ Create SVG Image

🚨 Huge News Google just introduced ScreenAI, and it's wild. This is going to transform the future of UX forever Here's everything you need to stay ahead of the curve: 👇

A Google acaba de revelar o ScreenAI e é INSANO. Deixa todas as ferramentas de infografia a perder de vista. Aqui está tudo o que precisa de saber :

Google acaba de presentar ScreenAI, y es INSANE Deja a todas las herramientas infográficas en el polvo. Aquí está todo lo que necesitas saber :

Google just introduced ScreenAI, and it's INSANE It leaves every Infographic tool in the dust. Here's everything you need to know: